1.1.10 • Published 1 month ago
@synerise/ds-banner v1.1.10
id: banner
title: Banner
Banner UI Component
Installation
npm i @synerise/ds-banner
or
yarn add @synerise/ds-banner
Usage
import Banner from '@synerise/ds-banner'
<Banner />
Demo
API
Property | Description | Type | Default |
---|---|---|---|
slides | Array of slides to display | BannerSlideProps[] | - |
autoPlay | auto-start slideshow (if multiple slides present) | boolean | true |
transitionEffect | slide transition effect | 'scrollx' / 'fade' see antd carousel | 'scrollx' |
autoPlaySpeed | duration of single slide display (ms) | number | 5000 |
onAfterChange | handler to call after slides change | (index: number) => void | - |
onBeforeChange | handler to call before slides change | (from: number, to: index) => void | - |
onClose | handler to call when 'X' is clicked | () => void | - |
expandable | displays persistent bar above slides with a collapse button and title | ExpandableProps | - |
texts | custom translations | BannerTexts | - |
BannerSlideProps
Property | Description | Type | Default |
---|---|---|---|
mainContent | main area content | BannerSlideTextContentProps / BannerSlideMediaContentProps | - |
leftSideContent | left side content | BannerSlideTextContentProps / BannerSlideMediaContentProps | - |
rightSideContent | right side content | BannerSlideTextContentProps / BannerSlideMediaContentProps | - |
BannerSlideTextContentProps
Property | Description | Type | Default |
---|---|---|---|
titlePrefix | icon / avatar prefix of the title | ReactNode | - |
titleStatus | Title status tag | StatusProps, see ds-status | - |
title | Slide title | ReactNode | - |
buttons | Slide buttons | ReactNode | - |
description | Slide description text | ReactNode | - |
BannerSlideMediaContentProps
Property | Description | Type | Default |
---|---|---|---|
media | image to display | ReactNode | - |
ExpandableProps
Property | Description | Type | Default |
---|---|---|---|
title | Top bar title text | ReactNode | - |
icon | Top bar icon prefix | ReactNode | - |
expanded | default exapnded state | boolean | true |
BannerTexts
Property | Description | Type | Default |
---|---|---|---|
expand | toggle button label when banner is collapsed | ReactNode | 'Expand' |
collapse | toggle button label when banner is expanded | ReactNode | 'Collapse' |
closeTooltip | tooltip text over 'X' icon | ReactNode | 'Close' |
1.1.1
4 months ago
1.1.0
4 months ago
1.0.0
4 months ago
1.1.9
1 month ago
1.1.8
2 months ago
1.1.7
2 months ago
1.1.6
2 months ago
1.1.5
3 months ago
1.1.4
3 months ago
1.1.3
3 months ago
1.1.2
4 months ago
1.1.10
1 month ago
0.2.9
4 months ago
0.2.8
4 months ago
0.2.7
5 months ago
0.2.6
5 months ago
0.2.5
5 months ago
0.2.4
5 months ago
0.2.3
5 months ago
0.2.2
5 months ago
0.2.1
5 months ago
0.2.0
6 months ago
0.1.4
6 months ago
0.1.3
6 months ago
0.1.2
7 months ago
0.1.1
7 months ago
0.1.0
7 months ago
0.0.1
8 months ago