v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

タイムライン

    Framework7 にはタイムラインコンポーネントがあり、縦と横のタイムラインレイアウトを表示することができます。

    Vertical Timeline

    一般的な縦型のタイムラインレイアウトは以下のようになります。

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

    構造

    • timeline - メインのタイムラインラッピング要素。必須
      • timeline-item - 1つのタイムラインアイテム。必須
        • timeline-item-date - タイムラインアイテムの日付です。必須
        • timeline-item-divider - タイムラインアイテムの装飾的な仕切り。垂直方向のタイムラインには必須です。
        • timeline-item-content - タイムラインアイテムのコンテンツのラッピングです。テキスト、カード、リストブロック、カスタムHTMLや特別なタイムライン要素など、どんなコンテンツでもここに置くことができます。必須項目
          • timeline-item-inner - アイテムコンテンツの追加の装飾的なラッピング。オプション
          • timeline-item-time - アイテムの時間です。オプション
          • timeline-item-title - アイテムのタイトルです。オプション
          • timeline-item-subtitle - アイテムのサブタイトルです。オプション
          • timeline-item-text - アイテムのテキストです。オプション

    縦型タイムラインの例

    <!-- タイムライン -->
<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">Plain text item</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>
  <!-- 特別なTimeline要素のあるTimelineアイテム -->
  <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-time">12:33</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
    </div>
  </div>
  <!-- 特別なTimelineエレメントとインナーを持つTimelineアイテム -->
  <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">
        <div class="timeline-item-time">12:33</div>
        ...
      </div>
    </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">
      <div class="timeline-item-time">12:33</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
      <div class="timeline-item-time">15:45</div>
      <div class="timeline-item-title">Item Title</div>
      <div class="timeline-item-subtitle">Item Subtitle</div>
      <div class="timeline-item-text">Item Text</div>
    </div>
  </div>
  <!-- 1日に複数のイベント（インナー）があるTimelineアイテム -->
  <div class="timeline-item">
    <div class="timeline-item-date">26 <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:33</div>
        ...
      </div>
      <div class="timeline-item-inner">
        <div class="timeline-item-time">15:45</div>
        ...
      </div>
    </div>
  </div>
  <!-- カード付きのタイムラインアイテム -->
  <div class="timeline-item">
    <div class="timeline-item-date">27 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content card">
      <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>

    Vertical Timeline Side By Side

    縦型Timelineにはもう一つの「サイドバイサイド」モードがあり、それぞれの次のアイテムが異なる側に表示されます。サイドバイサイド "モードを有効にするには、メインの timeline 要素に timeline-sides クラスを追加する必要があります。

    また、レスポンシブブレークポイントに基づいて、このモードを有効にすることも可能です。例えば、タブレットデバイス(width >= 786px)の場合には、メインのtimeline要素にmedium-sidesクラスを追加する必要があります。このようなレスポンシブクラスの完全なセットについては、Grid docsを参照してください。これらのクラスは xsmall-sides, small-sides, medium-sides, large-sides, xlarge-sides です。

    タイムラインの要素を必要な側に強制的に移動させるには、単一のタイムラインアイテム要素である timeline-item に対して、追加の timeline-item-left と timeline-item-right クラスを使用することができます。

    <!-- それぞれの次のアイテムは別の側にある -->
<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>
<!-- 大きなタブレット画面(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>
<!-- 強制的なサイド -->
<div class="block-title">Forced Sides</div>
<div class="timeline timeline-sides">
  <!-- 追加の "timeline-item-right" クラスで強制的に右側に移動します。 -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    ...
  </div>
  <!-- 追加の "timeline-item-right "クラスで強制的に右側に移動します。 -->
  <div class="timeline-item timeline-item-right">
    <div class="timeline-item-date">22 <small>DEC</small></div>
    ...
  </div>
  <!-- timeline-item-left "クラスの追加で左側に強制移動 -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">23 <small>DEC</small></div>
    ...
  </div>
  <!-- 追加の "timeline-item-left "クラスで強制的に左側に移動します。 -->
  <div class="timeline-item timeline-item-left">
    <div class="timeline-item-date">24 <small>DEC</small></div>
    ...
  </div>
</div>

    Horizontal Timeline

    水平タイムラインは、垂直タイムラインと同じレイアウトですが、メインの timeline 要素に timeline-horizontal クラスが追加されます。

    また、Layout Gridの列のクラスである、col-33やtablet-20（大きなタブレット画面用に列の幅を定義する）を使用して、タイムラインのビューごとに列をコントロールすることもできます。

    <!--
Additional "timeline-horizontal" class to enable Horizontal timeline
Additional "col-50" to define column width (50%)
Additional "tablet-20" to define column width for tablets (20%)
-->
<div class="timeline timeline-horizontal col-50 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-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">14:45</div>
        <div class="timeline-item-text">Do something</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">
        ...
      </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 inset">
        <ul>
          ...
        </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>
  </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>
  </div>
</div>

    Calendar Timeline

    カレンダータイムラインは、ホリゾンタルとほぼ同じレイアウトですが、年と月の折り返し要素が追加されているので、以下のような構造になります。

    <div class="timeline timeline-horizontal">
  <!-- タイムライン 年 -->
  <div class="timeline-year">
    <!-- 年 タイトル -->
    <div class="timeline-year-title"><span>2016</span></div>
    <!-- 月 -->
    <div class="timeline-month">
      <!-- 月 タイトル -->
      <div class="timeline-month-title"><span>January</span></div>
      <!-- 項目 -->
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
    </div>
    <!-- 別の月 -->
    <div class="timeline-month">
      <!-- 月タイトル -->
      <div class="timeline-month-title"><span>February</span></div>
      <!-- 項目 -->
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
      <div class="timeline-item">...</div>
    </div>
    ...
  </div>
  <!-- タイムライン 他の年 -->
  <div class="timeline-year">
    <div class="timeline-year-title"><span>2017</span></div>
    <!-- 月 -->
    <div class="timeline-month">...</div>
    <div class="timeline-month">...</div>
    ...
  </div>
</div>
    <!--
Additional "timeline-horizontal" class to enable Horizontal timeline
Additional "col-33" to define column width (33%)
Additional "tablet-15" to define column width for tablets (15%)
-->
<div class="timeline timeline-horizontal col-33 tablet-15">
  <!-- タイムライン年 -->
  <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">21: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">21</div>
        ...
      </div>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">31</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>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">31</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>
      ...
      <div class="timeline-item">
        <div class="timeline-item-date">28</div>
        ...
      </div>
    </div>
  </div>
</div>

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    :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;
  --f7-timeline-item-inner-bg-color: #fff;
}
:root .theme-dark,
:root.theme-dark {
  --f7-timeline-item-inner-bg-color: #1c1c1d;
  --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);
}
.ios {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 35px;
  --f7-timeline-item-inner-border-radius: 7px;
  --f7-timeline-item-inner-box-shadow: none;
  --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-horizontal-item-date-shadow-image: none;
  --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 .theme-dark,
.ios.theme-dark {
  --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: 4px;
  --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  --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-item-text-color: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  --f7-timeline-horizontal-item-date-border-color: transparent;
}
.md .theme-dark,
.md.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-timeline-padding-horizontal: 16px;
  --f7-timeline-margin-vertical: 32px;
  --f7-timeline-item-inner-border-radius: 8px;
  --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  --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: 600;
  --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-item-text-color: inherit;
  --f7-timeline-year-font-size: 16px;
  --f7-timeline-horizontal-item-padding: 12px;
  --f7-timeline-horizontal-item-date-shadow-image: none;
  --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
}