0.0.9 • Published 3 years ago
react-bootstrap-timeline v0.0.9
React-Bootstrap-Timeline
Getting Started
Installation
npm install react-bootstrap-timeline
Usage
Import Bootstrap style to the project
import 'bootstrap/dist/css/bootstrap.css';
Bootstrap 4.6.0 has already installed.
The component can be used in following ways
Nested childs
<Timeline> <Card content={'This is the content of the react-bootstrap-timeline'} title={'react-bootstrap-timeline-Card-1'} isActive={false} datetime={'2021-07-17'} /> <Card content={'This is the content of the react-bootstrap-timeline'} title={'react-bootstrap-timeline-Card-2'} isActive={true} datetime={'2021-07-17'} /> </Timeline>
Using array
let cards: CardProps[] = [ { content:'This is the content of the react-bootstrap-timeline', title:'react-bootstrap-timeline-Card-1', isActive:true, datetime:'2021-07-17' }, { content:'This is the content of the react-bootstrap-timeline', title:'react-bootstrap-timeline-Card-2', isActive:false, datetime:'2021-07-17' } ]; <Timeline cards={cards}/>
- Integration of both
let cards: CardProps[] = [ { content:'This is the content of the react-bootstrap-timeline', title:'react-bootstrap-timeline-Card-1', isActive:true, datetime:'2021-07-17' } ]; <Timeline> <Card content={'This is the content of the react-bootstrap-timeline'} title={'react-bootstrap-timeline-Card-2'} isActive={false} datetime={'2021-07-17'} /> </Timeline>
Advance Setting
let timelineSetting: Setting = {
Alignment: TimelineAlignment.Right,//timeline alignment
Size: BsSize.Medium,//bootstrap sizes
PaddingY: BsPaddingY.Five,//padding between cards
};
Usage
<Timeline setting={timelineSetting}>
<Card
content={'This is the content of the react-bootstrap-timeline'}
title={'react-bootstrap-timeline-Card-1'}
isActive={false}
datetime={'2021-07-17'}/>
<Card
content={'This is the content of the react-bootstrap-timeline'}
title={'react-bootstrap-timeline-Card-2'}
isActive={true}
datetime={'2021-07-17'}/>
</Timeline>