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 Vue component represents Timeline component.
<f7-timeline>
<f7-timeline-item day="21" month="DEC" inner content="Some text goes here"></f7-timeline-item>
<f7-timeline-item day="22" month="DEC" inner content="Another text goes here"></f7-timeline-item>
...
</f7-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>
<f7-timeline sides>
<f7-timeline-item day="21" month="DEC" inner content="Some text goes here"></f7-timeline-item>
...
</f7-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>
<f7-timeline sides>
<f7-timeline-item side="right" day="21" month="DEC" inner content="Some text goes here"></f7-timeline-item>
...
<f7-timeline-item side="left" day="23" month="DEC" inner content="Just plain text"></f7-timeline-item>
...
</f7-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>
<f7-timeline>
<!-- With Item Elements -->
<f7-timeline-item
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?"
></f7-timeline-item>
<!-- With List -->
<f7-timeline-item
day="23"
month="DEC"
>
<f7-list inset>
<f7-list-item link="#" title="Item 1"></f7-list-item>
...
</f7-list>
</f7-timeline-item>
<!-- With Card -->
<f7-timeline-item
day="24"
month="DEC"
>
<f7-card title="Card Header" content="Card Content" footer="Card Footer"></f7-card>
</f7-timeline-item>
</f7-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>
<f7-timeline horizontal col="33" tablet-col="20">
<f7-timeline-item day="21" month="DEC">
<f7-timeline-item-child inner time="12:56" text="Task 1" ></f7-timeline-item-child>
<f7-timeline-item-child inner time="13:15" text="Task 2" ></f7-timeline-item-child>
...
</f7-timeline-item>
<f7-timeline-item day="22" month="DEC">
...
</f7-timeline-item>
...
</f7-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>
<f7-timeline horizontal col="33" tablet-col="15">
<!-- Year -->
<f7-timeline-year title="2016">
<!-- Month -->
<f7-timeline-month title="November">
<f7-timeline-item date="1">...</f7-timeline-item>
...
<f7-timeline-item date="30">...</f7-timeline-item>
</f7-timeline-month>
<!-- Another Month -->
<f7-timeline-month title="December">
<f7-timeline-item date="1">...</f7-timeline-item>
...
<f7-timeline-item date="31">...</f7-timeline-item>
</f7-timeline-month>
</f7-timeline-year>
<!-- Another Year -->
<f7-timeline-year title="2017">
<f7-timeline-month title="January">
<f7-timeline-item date="1">...</f7-timeline-item>
...
<f7-timeline-item date="30">...</f7-timeline-item>
</f7-timeline-month>
...
</f7-timeline-year>
...
</f7-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 |
---|---|---|
<f7-timeline> properties | ||
sides | boolean | Enables Side by Side vertical timeline |
tablet-sides | 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 |
tablet-col | string/number | Horizontal timeline column width (in %) for tabelt screens only. According to Layout Grid available columns |
<f7-timeline-year> properties | ||
title | string/number | Year title/number |
<f7-timeline-month> properties | ||
title | string/number | Month title/number |
<f7-timeline-item> 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 |
<f7-timeline-item-child> 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 |