Language: ENCN

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