Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and navigation elements.
Timeline React component represents Timeline component.
<Timeline>
<TimelineItem day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
<TimelineItem day="22" month="DEC" inner content="Another text goes here"></TimelineItem>
...
</Timeline>
Renders to:
<div class="timeline">
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">Some text goes here</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">22 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">Another text goes here</div>
</div>
</div>
...
</div>
<Timeline sides>
<TimelineItem day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
...
</Timeline>
Renders to:
<div class="timeline timeline-sides">
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">Some text goes here</div>
</div>
</div>
...
</div>
<Timeline sides>
<TimelineItem side="right" day="21" month="DEC" inner content="Some text goes here"></TimelineItem>
...
<TimelineItem side="left" day="23" month="DEC" inner content="Just plain text"></TimelineItem>
...
</Timeline>
Renders to:
<div class="timeline timeline-sides">
<div class="timeline-item timeline-item-right">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">Some text goes here</div>
</div>
</div>
...
<div class="timeline-item timeline-item-left">
<div class="timeline-item-date">23 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">Just plain text</div>
</div>
</div>
...
</div>
<Timeline>
<!-- With Item Elements -->
<TimelineItem
day="21"
month="DEC"
inner
time="12:56"
title="Item Title"
subtitle="Item Subtitle"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?"
></TimelineItem>
<!-- With List -->
<TimelineItem
day="23"
month="DEC"
>
<List inset>
<ListItem link="#" title="Item 1"></ListItem>
...
</List>
</TimelineItem>
<!-- With Card -->
<TimelineItem
day="24"
month="DEC"
>
<Card title="Card Header" content="Card Content" footer="Card Footer"></Card>
</TimelineItem>
</Timeline>
Renders to:
<div class="timeline">
<!-- With Item Elements -->
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">
<div class="timeline-item-time">12:56</div>
<div class="timeline-item-title">Item Title</div>
<div class="timeline-item-subtitle">Item Subtitle</div>
<div class="timeline-item-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?
</div>
</div>
</div>
</div>
<!-- With List -->
<div class="timeline-item">
<div class="timeline-item-date">23 <small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="list-block inset">
<ul>
<li>
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- With Card -->
<div class="timeline-item">
<div class="timeline-item-date">24<small>DEC</small></div>
<div class="timeline-item-divider"></div>
<div class="timeline-item-content">
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-content">
<div class="card-content-inner">
<div>Card Content</div>
</div>
</div>
<div class="card-footer">Card Footer</div>
</div>
</div>
</div>
</div>
<Timeline horizontal col="33" tabletCol="20">
<TimelineItem day="21" month="DEC">
<TimelineItemChild inner time="12:56" text="Task 1" ></TimelineItemChild>
<TimelineItemChild inner time="13:15" text="Task 2" ></TimelineItemChild>
...
</TimelineItem>
<TimelineItem day="22" month="DEC">
...
</TimelineItem>
...
</Timeline>
Renders to:
<div class="timeline timeline-horizontal col-33 tablet-20">
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-content">
<div class="timeline-item-inner">
<div class="timeline-item-time">12:56</div>
<div class="timeline-item-text">Task 1</div>
</div>
<div class="timeline-item-inner">
<div class="timeline-item-time">13:15</div>
<div class="timeline-item-text">Task 2</div>
</div>
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-date">21 <small>DEC</small></div>
<div class="timeline-item-content">
...
</div>
</div>
...
</div>
<Timeline horizontal col="33" tabletCol="15">
<!-- Year -->
<TimelineYear title="2016">
<!-- Month -->
<TimelineMonth title="November">
<TimelineItem date="1">...</TimelineItem>
...
<TimelineItem date="30">...</TimelineItem>
</TimelineMonth>
<!-- Another Month -->
<TimelineMonth title="December">
<TimelineItem date="1">...</TimelineItem>
...
<TimelineItem date="31">...</TimelineItem>
</TimelineMonth>
</TimelineYear>
<!-- Another Year -->
<TimelineYear title="2017">
<TimelineMonth title="January">
<TimelineItem date="1">...</TimelineItem>
...
<TimelineItem date="30">...</TimelineItem>
</TimelineMonth>
...
</TimelineYear>
...
</Timeline>
Renders to:
<div class="timeline timeline-horizontal col-33 tablet-15">
<!-- Year -->
<div class="timeline-year">
<div class="timeline-year-title"><span>2016</span></div>
<!-- Month -->
<div class="timeline-month">
<div class="timeline-month-title"><span>November</span></div>
<div class="timeline-item">
<div class="timeline-item-date">1</div>
...
</div>
...
<div class="timeline-item">
<div class="timeline-item-date">30</div>
...
</div>
</div>
<!-- Another Month -->
<div class="timeline-month">
<div class="timeline-month-title"><span>December</span></div>
<div class="timeline-item">
<div class="timeline-item-date">1</div>
...
</div>
...
<div class="timeline-item">
<div class="timeline-item-date">31</div>
...
</div>
</div>
</div>
<!-- Another Year -->
<div class="timeline-year">
<div class="timeline-year-title"><span>2017</span></div>
<!-- Month -->
<div class="timeline-month">
<div class="timeline-month-title"><span>January</span></div>
<div class="timeline-item">
<div class="timeline-item-date">1</div>
...
</div>
...
<div class="timeline-item">
<div class="timeline-item-date">30</div>
...
</div>
</div>
...
</div>
</div>
Prop | Type | Description |
---|---|---|
<Timeline> properties | ||
sides | boolean | Enables Side by Side vertical timeline |
tabletSides | boolean | Enables Side by Side vertical timeline for tablet screens only |
horizontal | boolean | Enables horizontal timeline |
col | string/number | Horizontal timeline column width (in %). According to Layout Grid available columns |
tabletCol | string/number | Horizontal timeline column width (in %) for tabelt screens only. According to Layout Grid available columns |
<TimelineYear> properties | ||
title | string/number | Year title/number |
<TimelineMonth> properties | ||
title | string/number | Month title/number |
<TimelineItem> properties | ||
date | string/number/date | Timeline item date. Can be used instead of day and month props to provide custom date formatting |
day | string/number | Timeline item day |
month | string/number | Timeline item month |
inner | boolean | Adds additional inner wrapping for extra highlighting |
side | string | Forces timeline item side. When Side by Side is enabled |
time | string | Timeline item time |
title | string | Timeline item date |
subtitle | string | Timeline item subtitle |
text | string | Timeline item text |
content | string | Timeline item content. title, subtitle, time, text props will be ignored in case of this prop is used |
<TimelineItemChild> properties | ||
inner | boolean | Adds additional inner wrapping for extra highlighting |
time | string | Timeline item time |
title | string | Timeline item date |
subtitle | string | Timeline item subtitle |
text | string | Timeline item text |
content | string | Timeline item content. title, subtitle, time, text props will be ignored in case of this prop is used |