0.1.2 • Published 2 years ago
Installation
yarn add @acctglobal/stick-bar
npm install @acctglobal/stick-bar
import { StickBar } from '@acctglobal/stick-bar'
StickBar
StickBar is a Component of a Carousel of texts that came from props.
Configuration
- Add import from component
import StickBar from '@acctglobal/stick-bar';
- Now call StickBar in code and pass the required props, texts must to be an Array of strings.
Component being Called with only mandatory props will look like this:
<StickBar texts={texts} />
Component can be customized with use of props:
<StickBar
texts={TopBarTexts}
arrows={{ iconColor: '#fff', isArrowVisible: true, style: { backgroundColor: 'transparent' } }}
bullets={{ bulletDisableColor: '#000', bulletEnableColor: '#E8E8E8', isBulletVisible: true, numeric: true, style: { background: 'transparent' } }}
/>
StickBarProps:
| Prop name | Type | Description |
|---|
| texts | string | The texts that must be rendered inside of Carousel |
| arrows | Object | Customize the arrows from Carousel |
| bullets | Object | Customize the bullets from Carousel |
Arrows Object:
| Prop name | Type | Description |
|---|
| isArrowVisible | boolean | Defines if the arrow will be visible in Carousel |
| iconColor | string | Change the arrow color |
| style | Object | Accept all kind of styles |
Bullets Object :
| Prop name | Type | Description |
|---|
| numeric | boolean | Defines a numeric bullet |
| bulletEnableColor | string | Defines the color of the enabled bullet |
| bulletDisableColor | string | Defines the color of the disabled bullet |
| isBulletVisible | boolean | Defines if the bullet will be visible |
| style | Object | Accept all kind of styles |