時間軸

Framework7 附帶時間軸元件，可顯示垂直和水平時間軸配置。

垂直時間軸

常見的垂直時間軸配置可以視為以下內容

<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">
        <div class="timeline-item-time">12:30</div>
        <div class="timeline-item-title">Title</div>
        <div class="timeline-item-subtitle">Subtitle</div>
        <div class="timeline-item-text">Text</div>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    ... another timeline item ...
  </div>
</div>

其中

時間軸 - 主要時間軸包裝元素。必要
- 時間軸項目 - 單一時間軸項目。必要
  - 時間軸項目日期 - 時間軸項目日期。必要
  - 時間軸項目分隔線 - 時間軸項目裝飾性分隔線。垂直時間軸必要
  - 時間軸項目內容 - 時間軸項目內容包裝。您可以在這裡放置任何內容：文字、卡片、清單區塊、自訂 HTML 或特殊時間軸元素。必要
    - 時間軸項目內部 - 項目內容額外裝飾性包裝。選用
    - 時間軸項目時間 - 項目時間。選用
    - 時間軸項目標題 - 項目標題。選用
    - 時間軸項目副標題 - 項目副標題。選用
    - 時間軸項目文字 - 項目文字。選用

垂直時間軸範例

timeline-vertical.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Vertical Timeline</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Default</div>
    <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 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="timeline-item-inner">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 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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Side By Side</div>
    <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 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 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="timeline-item-inner">Just plain text</div>
        </div>
      </div>
      <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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Only Tablet Side By Side</div>
    <div class="timeline medium-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 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 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="timeline-item-inner">Just plain text</div>
        </div>
      </div>
      <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="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Forced Sides</div>
    <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-right">
        <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 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 class="timeline-item timeline-item-left">
        <div class="timeline-item-date">24 <small>DEC</small></div>
        <div class="timeline-item-divider"></div>
        <div class="timeline-item-content">
          <div class="timeline-item-inner">One more text here</div>
        </div>
      </div>
    </div>
    <div class="block-title">Rich Content</div>
    <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">
            <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 class="timeline-item-time">15:07</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>
      <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">
            <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 class="timeline-item-inner">
            <div class="timeline-item-time">15:07</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>
      <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 card no-safe-areas">
          <div class="card-header">Card Header</div>
          <div class="card-content card-content-padding">Card Content</div>
          <div class="card-footer">Card Footer</div>
        </div>
      </div>
      <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 list links-list inset list-strong list-dividers-ios no-safe-areas">
          <ul>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 3</a></li>
          </ul>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">25 <small>DEC</small></div>
        <div class="timeline-item-divider"></div>
        <div class="timeline-item-content">Plain text</div>
      </div>
    </div>
    <div class="block-title">Inside Content Block</div>
    <div class="block block-strong">
      <div class="timeline no-safe-areas">
        <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 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="timeline-item-inner">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 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="timeline-item-inner">One more text here</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

垂直時間軸並排

垂直時間軸提供另一種「並排」模式，其中每個後續項目將位於不同的側邊。若要啟用「並排」模式，您需要將 時間軸側邊 類別新增至主要 時間軸 元素。

也可以根據回應式中斷點啟用此模式。例如，對於平板電腦裝置 (寬度 >= 786px)，我們需要將 中型側邊 類別新增至主要時間軸元素。如需完整的一組此類回應式類別，請查看網格文件。它們是 超小型側邊、小型側邊、中型側邊、大型側邊、超大型側邊。

若要強制時間軸元素到所需側邊，我們可以在單一時間軸項目元素 時間軸項目 上使用額外的 時間軸項目左 和 時間軸項目右 類別

<!-- Each next item will on different side -->
<div class="block-title">Side By Side</div>
<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 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 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="timeline-item-inner">Just plain text</div>
    </div>
  </div>
  <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="timeline-item-inner">One more text here</div>
    </div>
  </div>
</div>
<!-- Each next item will on different side only on large tablet screens (iPad) -->
<div class="block-title">Only Tablet Side By Side</div>
<div class="timeline medium-sides">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    ...
  </div>
  <div class="timeline-item">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    ...
  </div>
</div>
<!-- Forced sides -->
<div class="block-title">Forced Sides</div>
<div class="timeline timeline-sides">
  <!-- Force to right side by additional "timeline-item-right" class -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to right side by additional "timeline-item-right" class -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to left side by additional "timeline-item-left" class -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    ...
  </div>
  <!-- Force to left side by additional "timeline-item-left" class -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    ...
  </div>
</div>

水平時間軸

水平時間軸的佈局與垂直時間軸相同，但主時間軸元素上有一個額外的 timeline-horizontal 類別。

我們也可以使用佈局格線類別來控制時間軸中每列的檢視，例如 timeline-cols-3 和 medium-timeline-cols-5（用於定義大型平板電腦螢幕的欄寬）。

timeline-horizontal.html

<div class="page">
  <div class="navbar no-shadow">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Horizontal Timeline</div>
    </div>
  </div>
  <div class="page-content">
    <div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-5">
      <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-title">Title 1</div>
            <div class="timeline-item-subtitle">Subtitle 1</div>
            <div class="timeline-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">13:15</div>
            <div class="timeline-item-title">Title 2</div>
            <div class="timeline-item-subtitle">Subtitle 2</div>
            <div class="timeline-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">14:45</div>
            <div class="timeline-item-text">Do something</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">16:11</div>
            <div class="timeline-item-text">Do something else</div>
          </div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">22 <small>DEC</small></div>
        <div class="timeline-item-content">Plain text goes here</div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">23 <small>DEC</small></div>
        <div class="timeline-item-content">
          <div class="card no-safe-areas">
            <div class="card-header">Card</div>
            <div class="card-content card-content-padding">Card Content</div>
            <div class="card-footer">Card Footer</div>
          </div>
          <div class="card no-safe-areas">
            <div class="card-content card-content-padding">Another Card Content</div>
          </div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">24 <small>DEC</small></div>
        <div class="timeline-item-content">
          <div class="list links-list inset list-strong list-dividers-ios no-safe-areas">
            <ul>
              <li><a>Item 1</a></li>
              <li><a>Item 2</a></li>
              <li><a>Item 3</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">25 <small>DEC</small></div>
        <div class="timeline-item-content">
          <div class="timeline-item-time">11:11</div>
          <div class="timeline-item-text">Task 1</div>
          <div class="timeline-item-time">12:33</div>
          <div class="timeline-item-text">Task 2</div>
          <div class="timeline-item-time">13:24</div>
          <div class="timeline-item-text">Task 3</div>
          <div class="timeline-item-time">14:55</div>
          <div class="timeline-item-text">Task 4</div>
          <div class="timeline-item-time">15:15</div>
          <div class="timeline-item-text">Task 5</div>
          <div class="timeline-item-time">16:54</div>
          <div class="timeline-item-text">Task 6</div>
        </div>
      </div>
      <div class="timeline-item">
        <div class="timeline-item-date">26 <small>DEC</small></div>
        <div class="timeline-item-content">
          <div class="timeline-item-inner">
            <div class="timeline-item-time">11:11</div>
            <div class="timeline-item-text">Task 1</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">12:33</div>
            <div class="timeline-item-text">Task 2</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">13:24</div>
            <div class="timeline-item-text">Task 3</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">14:55</div>
            <div class="timeline-item-text">Task 4</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">15:15</div>
            <div class="timeline-item-text">Task 5</div>
          </div>
          <div class="timeline-item-inner">
            <div class="timeline-item-time">16:54</div>
            <div class="timeline-item-text">Task 6</div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

日曆時間軸

日曆時間軸的佈局與水平時間軸幾乎相同，但有額外的年份和月份包裝元素，因此結構應如下所示

timeline-horizontal-calendar.html

<div class="page">
  <div class="navbar no-shadow">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Horizontal Timeline Calendar</div>
    </div>
  </div>
  <div class="page-content">
    <div class="timeline timeline-horizontal timeline-cols-3 medium-timeline-cols-6">
      <div class="timeline-year">
        <div class="timeline-year-title"><span>2016</span></div>
        <div class="timeline-month">
          <div class="timeline-month-title"><span>December</span></div>
          <div class="timeline-item">
            <div class="timeline-item-date">20</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">21</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">22</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">23:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">23</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">24</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">25</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">26</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">27</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">28</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">21:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">29</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">30</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">21:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">31</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline-year">
        <div class="timeline-year-title"><span>2017</span></div>
        <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 class="timeline-item-content">
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">2</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">3</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">4</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">5</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">6</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">7</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">8</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">9</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">21:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">10</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">11</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">12</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">13</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">14</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">15</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">16</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">17</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">18</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">19</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">20</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">21</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">22</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">23</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">24</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">25</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">26</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">22:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">21:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">27</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">28</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">29</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">30</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">31</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
        </div>
        <div class="timeline-month">
          <div class="timeline-month-title"><span>February</span></div>
          <div class="timeline-item">
            <div class="timeline-item-date">1</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">2</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">3</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">4</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 4</div>
              <div class="timeline-item-time">23:00</div>
              <div class="timeline-item-text">Task 5</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">5</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">6</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">7</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">8</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">9</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">22:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">10</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">8:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">11</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 4</div>
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 5</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">12</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">23:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">13</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">14</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">15</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">16</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">22:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">17</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">10:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">23:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 4</div>
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 5</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">18</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">19</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">16:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">12:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">1:00</div>
              <div class="timeline-item-text">Task 4</div>
              <div class="timeline-item-time">9:00</div>
              <div class="timeline-item-text">Task 5</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">20</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">19:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">14:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">17:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">21</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">4:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">11:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">22</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">22:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 3</div>
              <div class="timeline-item-time">6:00</div>
              <div class="timeline-item-text">Task 4</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">23</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">0:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">24</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">7:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">25</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">5:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">26</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">13:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">18:00</div>
              <div class="timeline-item-text">Task 2</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">27</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">2:00</div>
              <div class="timeline-item-text">Task 1</div>
              <div class="timeline-item-time">20:00</div>
              <div class="timeline-item-text">Task 2</div>
              <div class="timeline-item-time">3:00</div>
              <div class="timeline-item-text">Task 3</div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="timeline-item-date">28</div>
            <div class="timeline-item-content">
              <div class="timeline-item-time">15:00</div>
              <div class="timeline-item-text">Task 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

CSS 變數

以下是相關 CSS 變數（CSS 自訂屬性）的清單。

:root {
  --f7-timeline-inner-block-margin-vertical: 16px;
  --f7-timeline-divider-margin-horizontal: 16px;
  --f7-timeline-horizontal-date-height: 34px;
  --f7-timeline-year-height: 24px;
  --f7-timeline-year-font-weight: inherit;
  --f7-timeline-month-height: 24px;
  --f7-timeline-month-font-size: inherit;
  --f7-timeline-month-font-weight: inherit;
  --f7-timeline-item-text-font-weight: inherit;
  --f7-timeline-item-subtitle-font-weight: inherit;
}
.ios {
  --f7-timeline-divider-color: #bbb;
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 17px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 600;
  --f7-timeline-item-subtitle-font-size: 15px;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-color: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 10px;
  --f7-timeline-item-inner-bg-color: #fff;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
}
.ios .dark,
.ios.dark {
  --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
  --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-item-inner-border-radius: 16px;
  --f7-timeline-item-time-font-size: 13px;
  --f7-timeline-item-title-font-size: 16px;
  --f7-timeline-item-title-line-height: inherit;
  --f7-timeline-item-title-font-weight: 400;
  --f7-timeline-item-subtitle-font-size: inherit;
  --f7-timeline-item-subtitle-line-height: inherit;
  --f7-timeline-item-text-font-size: inherit;
  --f7-timeline-item-text-line-height: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-date-border-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-timeline-divider-color: var(--f7-md-outline);
  --f7-timeline-item-text-color: var(--f7-md-on-surface);
  --f7-timeline-horizontal-item-border-color: var(--f7-md-outline);
  --f7-timeline-item-inner-bg-color: var(--f7-md-surface-1);
  --f7-timeline-item-time-text-color: var(--f7-md-on-surface-variant);
}

改善此文件

在此頁面

垂直時間軸

垂直時間軸範例
垂直時間軸並排

水平時間軸
日曆時間軸
CSS 變數