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

1. Add import from component

import StickBar from '@acctglobal/stick-bar';

2. 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 |