Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

Timeline Vue Component

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.

Usage examples

Vertical Timeline

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

Side By Side

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

Forced Sides

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

Rich Content

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

Horizontal Timeline

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

Calendar Timeline

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

Properties

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