Timeline - 图1

Timeline

Framework7 comes with Timeline component that allows to display both Vertical & Horizontal timeline layouts.

Vertical Timeline

Common Vertical Timeline layout could be treated as the following:

  1. <div class="timeline">
  2.   <div class="timeline-item">
  3.     <div class="timeline-item-date">21 <small>DEC</small></div>
  4.     <div class="timeline-item-divider"></div>
  5.     <div class="timeline-item-content">
  6.       <div class="timeline-item-inner">
  7.         <div class="timeline-item-time">12:30</div>
  8.         <div class="timeline-item-title">Title</div>
  9.         <div class="timeline-item-subtitle">Subtitle</div>
  10.         <div class="timeline-item-text">Text</div>
  11.       </div>
  12.     </div>
  13.   </div>
  14.   <div class="timeline-item">
  15.     ... another timeline item ...
  16.   </div>
  17. </div>

Where

  • timeline - main timeline wrapping element. Required
    • timeline-item - single timeline item. Required
      • timeline-item-date - timeline item date. Required
      • timeline-item-divider - timeline item decorative divider. Required for vertical timeline
      • timeline-item-content - timeline item content wrapping. You can put any content here: text, cards, list block, custom HTML or special temeline elements. Required
        • timeline-item-inner - item content additional decorative wrapping. Optional
        • timeline-item-time - item time. Optional
        • timeline-item-title - item title. Optional
        • timeline-item-subtitle - item subtitle. Optional
        • timeline-item-text - item text. Optional

Vertical Timeline Example

  1. <!-- Timeline -->
  2. <div class="timeline">
  3.   <!-- Timeline item -->
  4.   <div class="timeline-item">
  5.     <div class="timeline-item-date">21 <small>DEC</small></div>
  6.     <div class="timeline-item-divider"></div>
  7.     <div class="timeline-item-content">Plain text item</div>
  8.   </div>
  9.   <!-- Timeline item with inner -->
  10.   <div class="timeline-item">
  11.     <div class="timeline-item-date">22 <small>DEC</small></div>
  12.     <div class="timeline-item-divider"></div>
  13.     <div class="timeline-item-content">
  14.       <div class="timeline-item-inner">Another text goes here</div>
  15.     </div>
  16.   </div>
  17.   <!-- Timeline item with special timeline elements -->
  18.   <div class="timeline-item">
  19.     <div class="timeline-item-date">23 <small>DEC</small></div>
  20.     <div class="timeline-item-divider"></div>
  21.     <div class="timeline-item-content">
  22.       <div class="timeline-item-time">12:33</div>
  23.       <div class="timeline-item-title">Item Title</div>
  24.       <div class="timeline-item-subtitle">Item Subtitle</div>
  25.       <div class="timeline-item-text">Item Text</div>
  26.     </div>
  27.   </div>
  28.   <!-- Timeline item with special timeline elements and inner -->
  29.   <div class="timeline-item">
  30.     <div class="timeline-item-date">24 <small>DEC</small></div>
  31.     <div class="timeline-item-divider"></div>
  32.     <div class="timeline-item-content">
  33.       <div class="timeline-item-inner">
  34.         <div class="timeline-item-time">12:33</div>
  35.         ...
  36.       </div>
  37.     </div>
  38.   </div>
  39.   <!-- Timeline item with multiple events per day  -->
  40.   <div class="timeline-item">
  41.     <div class="timeline-item-date">25 <small>DEC</small></div>
  42.     <div class="timeline-item-divider"></div>
  43.     <div class="timeline-item-content">
  44.       <div class="timeline-item-time">12:33</div>
  45.       <div class="timeline-item-title">Item Title</div>
  46.       <div class="timeline-item-subtitle">Item Subtitle</div>
  47.       <div class="timeline-item-text">Item Text</div>
  48.       <div class="timeline-item-time">15:45</div>
  49.       <div class="timeline-item-title">Item Title</div>
  50.       <div class="timeline-item-subtitle">Item Subtitle</div>
  51.       <div class="timeline-item-text">Item Text</div>
  52.     </div>
  53.   </div>
  54.   <!-- Timeline item with multiple events (inners) per day -->
  55.   <div class="timeline-item">
  56.     <div class="timeline-item-date">26 <small>DEC</small></div>
  57.     <div class="timeline-item-divider"></div>
  58.     <div class="timeline-item-content">
  59.       <div class="timeline-item-inner">
  60.         <div class="timeline-item-time">12:33</div>
  61.         ...
  62.       </div>
  63.       <div class="timeline-item-inner">
  64.         <div class="timeline-item-time">15:45</div>
  65.         ...
  66.       </div>
  67.     </div>
  68.   </div>
  69.   <!-- Timeline item with Card -->
  70.   <div class="timeline-item">
  71.     <div class="timeline-item-date">27 <small>DEC</small></div>
  72.     <div class="timeline-item-divider"></div>
  73.     <div class="timeline-item-content card">
  74.       <div class="card-header">Card header</div>
  75.       <div class="card-content card-content-padding">Card content</div>
  76.       <div class="card-footer">Card footer</div>
  77.     </div>
  78.   </div>
  79. </div>

Vertical Timeline Side By Side

There is another “side-by-side” mode available for Vertical Timeline where each next item will be on different side. To enable “side-by-side” mode you need to add timeline-sides class to main timeline element. It is also possible to enable this mode only for tablet devices by adding tablet-sides class to main timeline element.

To force timeline element to required side we may use additional timeline-item-left and timeline-item-right classes on single timeline item element timeline-item

  1. <!-- Each next item will on different side -->
  2. <div class="block-title">Side By Side</div>
  3. <div class="timeline timeline-sides">
  4.   <div class="timeline-item">
  5.     <div class="timeline-item-date">21 <small>DEC</small></div>
  6.     <div class="timeline-item-divider"></div>
  7.     <div class="timeline-item-content">
  8.       <div class="timeline-item-inner">Some text goes here</div>
  9.     </div>
  10.   </div>
  11.   <div class="timeline-item">
  12.     <div class="timeline-item-date">22 <small>DEC</small></div>
  13.     <div class="timeline-item-divider"></div>
  14.     <div class="timeline-item-content">
  15.       <div class="timeline-item-inner">Another text goes here</div>
  16.     </div>
  17.   </div>
  18.   <div class="timeline-item">
  19.     <div class="timeline-item-date">23 <small>DEC</small></div>
  20.     <div class="timeline-item-divider"></div>
  21.     <div class="timeline-item-content">
  22.       <div class="timeline-item-inner">Just plain text</div>
  23.     </div>
  24.   </div>
  25.   <div class="timeline-item">
  26.     <div class="timeline-item-date">24 <small>DEC</small></div>
  27.     <div class="timeline-item-divider"></div>
  28.     <div class="timeline-item-content">
  29.       <div class="timeline-item-inner">One more text here</div>
  30.     </div>
  31.   </div>
  32. </div>
  33. <!-- Each next item will on different side only on large tablet screens (iPad) -->
  34. <div class="block-title">Only Tablet Side By Side</div>
  35. <div class="timeline tablet-sides">
  36.   <div class="timeline-item">
  37.     <div class="timeline-item-date">21 <small>DEC</small></div>
  38.     ...
  39.   </div>
  40.   <div class="timeline-item">
  41.     <div class="timeline-item-date">22 <small>DEC</small></div>
  42.     ...
  43.   </div>
  44.   <div class="timeline-item">
  45.     <div class="timeline-item-date">23 <small>DEC</small></div>
  46.     ...
  47.   </div>
  48.   <div class="timeline-item">
  49.     <div class="timeline-item-date">24 <small>DEC</small></div>
  50.     ...
  51.   </div>
  52. </div>
  53. <!-- Forced sides -->
  54. <div class="block-title">Forced Sides</div>
  55. <div class="timeline timeline-sides">
  56.   <!-- Force to right side by additional "timeline-item-right" class -->
  57.   <div class="timeline-item timeline-item-right">
  58.     <div class="timeline-item-date">21 <small>DEC</small></div>
  59.     ...
  60.   </div>
  61.   <!-- Force to right side by additional "timeline-item-right" class -->
  62.   <div class="timeline-item timeline-item-right">
  63.     <div class="timeline-item-date">22 <small>DEC</small></div>
  64.     ...
  65.   </div>
  66.   <!-- Force to left side by additional "timeline-item-left" class -->
  67.   <div class="timeline-item timeline-item-left">
  68.     <div class="timeline-item-date">23 <small>DEC</small></div>
  69.     ...
  70.   </div>
  71.   <!-- Force to left side by additional "timeline-item-left" class -->
  72.   <div class="timeline-item timeline-item-left">
  73.     <div class="timeline-item-date">24 <small>DEC</small></div>
  74.     ...
  75.   </div>
  76. </div>

Horizontal Timeline

Horizontal Timeline has the same layout as Vertical but witha addional timeline-horizontal class on main timeline element.

We can also control columns per view in timeline by using Layout Grid columns’ classes like col-33 and tablet-20 (to define column width for large tablet screens).

  1. <!--
  2. Additional "timeline-horizontal" class to enable Horizontal timeline
  3. Additional "col-50" to define column width (50%)
  4. Additional "tablet-20" to define column width for tablets (20%)
  5. -->
  6. <div class="timeline timeline-horizontal col-50 tablet-20">
  7.   <!-- Timeline Item (Day) -->
  8.   <div class="timeline-item">
  9.     <div class="timeline-item-date">21 <small>DEC</small></div>
  10.     <div class="timeline-item-content">
  11.       <div class="timeline-item-inner">
  12.         <div class="timeline-item-time">12:56</div>
  13.         <div class="timeline-item-title">Title 1</div>
  14.         <div class="timeline-item-subtitle">Subtitle 1</div>
  15.         <div class="timeline-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  16.       </div>
  17.       ...
  18.       <div class="timeline-item-inner">
  19.         <div class="timeline-item-time">14:45</div>
  20.         <div class="timeline-item-text">Do something</div>
  21.       </div>
  22.       ...
  23.     </div>
  24.   </div>
  25.   <div class="timeline-item">
  26.     <div class="timeline-item-date">22 <small>DEC</small></div>
  27.     <div class="timeline-item-content">Plain text goes here</div>
  28.   </div>
  29.   <!-- Timeline Item With Card -->
  30.   <div class="timeline-item">
  31.     <div class="timeline-item-date">23 <small>DEC</small></div>
  32.     <div class="timeline-item-content">
  33.       <div class="card">
  34.         ...
  35.       </div>
  36.       ...
  37.     </div>
  38.   </div>
  39.   <!-- Timeline Item With List Block -->
  40.   <div class="timeline-item">
  41.     <div class="timeline-item-date">24 <small>DEC</small></div>
  42.     <div class="timeline-item-content">
  43.       <div class="list inset">
  44.         <ul>
  45.           ...
  46.         </ul>
  47.       </div>
  48.     </div>
  49.   </div>
  50.   <div class="timeline-item">
  51.     <div class="timeline-item-date">25 <small>DEC</small></div>
  52.     <div class="timeline-item-content">
  53.       <div class="timeline-item-time">11:11</div>
  54.       <div class="timeline-item-text">Task 1</div>
  55.       <div class="timeline-item-time">12:33</div>
  56.       <div class="timeline-item-text">Task 2</div>
  57.       ...
  58.     </div>
  59.   </div>
  60.   <div class="timeline-item">
  61.     <div class="timeline-item-date">26 <small>DEC</small></div>
  62.     <div class="timeline-item-content">
  63.       <div class="timeline-item-inner">
  64.         <div class="timeline-item-time">11:11</div>
  65.         <div class="timeline-item-text">Task 1</div>
  66.       </div>
  67.       <div class="timeline-item-inner">
  68.         <div class="timeline-item-time">12:33</div>
  69.         <div class="timeline-item-text">Task 2</div>
  70.       </div>
  71.       ...
  72.     </div>
  73.   </div>
  74. </div>

Calendar Timeline

Calendar Timeline has almost the same layout as Horizontal but with additional Year and Month wrapping elements, so the structure should be the following:

  1. <div class="timeline timeline-horizontal">
  2.   <!-- Timeline Year -->
  3.   <div class="timeline-year">
  4.     <!-- Year Title -->
  5.     <div class="timeline-year-title"><span>2016</span></div>
  6.     <!-- Month -->
  7.     <div class="timeline-month">
  8.       <!-- Month Title -->
  9.       <div class="timeline-month-title"><span>January</span></div>
  10.       <!-- Items -->
  11.       <div class="timeline-item">...</div>
  12.       <div class="timeline-item">...</div>
  13.       <div class="timeline-item">...</div>
  14.       <div class="timeline-item">...</div>
  15.     </div>
  16.     <!-- Another Month -->
  17.     <div class="timeline-month">
  18.       <!-- Month Title -->
  19.       <div class="timeline-month-title"><span>February</span></div>
  20.       <!-- Items -->
  21.       <div class="timeline-item">...</div>
  22.       <div class="timeline-item">...</div>
  23.       <div class="timeline-item">...</div>
  24.       <div class="timeline-item">...</div>
  25.     </div>
  26.     ...
  27.   </div>
  28.   <!-- Timeline Another Year -->
  29.   <div class="timeline-year">
  30.     <div class="timeline-year-title"><span>2017</span></div>
  31.     <!-- Months -->
  32.     <div class="timeline-month">...</div>
  33.     <div class="timeline-month">...</div>
  34.     ...
  35.   </div>
  36. </div>
  1. <!--
  2. Additional "timeline-horizontal" class to enable Horizontal timeline
  3. Additional "col-33" to define column width (33%)
  4. Additional "tablet-20" to define column width for tablets (20%)
  5. -->
  6. <div class="timeline timeline-horizontal col-33 tablet-15">
  7.   <!-- Timeline Year -->
  8.   <div class="timeline-year">
  9.     <!-- Timeline Year Title -->
  10.     <div class="timeline-year-title"><span>2016</span></div>
  11.     <!-- Timeline Month -->
  12.     <div class="timeline-month">
  13.       <!-- Timeline Month Title -->
  14.       <div class="timeline-month-title"><span>December</span></div>
  15.       <!-- Timeline Month Items -->
  16.       <div class="timeline-item">
  17.         <div class="timeline-item-date">20</div>
  18.         <div class="timeline-item-content">
  19.           <div class="timeline-item-time">21:00</div>
  20.           <div class="timeline-item-text">Task 1</div>
  21.           <div class="timeline-item-time">5:00</div>
  22.           <div class="timeline-item-text">Task 2</div>
  23.         </div>
  24.       </div>
  25.       <div class="timeline-item">
  26.         <div class="timeline-item-date">21</div>
  27.         ...
  28.       </div>
  29.       ...
  30.       <div class="timeline-item">
  31.         <div class="timeline-item-date">31</div>
  32.         ...
  33.       </div>
  34.     </div>
  35.   </div>
  36.   <!-- Timeline Year -->
  37.   <div class="timeline-year">
  38.     <!-- Timeline Year Title -->
  39.     <div class="timeline-year-title"><span>2017</span></div>
  40.     <!-- Timeline Month -->
  41.     <div class="timeline-month">
  42.       <!-- Timeline Month Title -->
  43.       <div class="timeline-month-title"><span>January</span></div>
  44.       <!-- Timeline Month Items -->
  45.       <div class="timeline-item">
  46.         <div class="timeline-item-date">1</div>
  47.         ...
  48.       </div>
  49.       ...
  50.       <div class="timeline-item">
  51.         <div class="timeline-item-date">31</div>
  52.         ...
  53.       </div>
  54.     </div>
  55.     <!-- Timeline Month -->
  56.     <div class="timeline-month">
  57.       <!-- Timeline Month Title -->
  58.       <div class="timeline-month-title"><span>February</span></div>
  59.       <!-- Timeline Month Items -->
  60.       <div class="timeline-item">
  61.         <div class="timeline-item-date">1</div>
  62.         ...
  63.       </div>
  64.       ...
  65.       <div class="timeline-item">
  66.         <div class="timeline-item-date">28</div>
  67.         ...
  68.       </div>
  69.     </div>
  70.   </div>
  71. </div>

CSS Variables

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

  1. :root {
  2.   --f7-timeline-horizontal-date-height: 34px;
  3.   --f7-timeline-year-height: 24px;
  4.   --f7-timeline-year-font-weight: inherit;
  5.   --f7-timeline-month-height: 24px;
  6.   --f7-timeline-month-font-size: inherit;
  7.   --f7-timeline-month-font-weight: inherit;
  8.   --f7-timeline-item-inner-bg-color: #fff;
  9.   --f7-timeline-item-text-font-weight: inherit;
  10.   --f7-timeline-item-subtitle-font-weight: inherit;
  11. }
  12. :root .theme-dark,
  13. :root.theme-dark {
  14.   --f7-timeline-item-inner-bg-color: #1c1c1d;
  15.   --f7-timeline-horizontal-item-border-color: #282829;
  16.   --f7-timeline-horizontal-item-date-border-color: #282829;
  17. }
  18. .ios {
  19.   --f7-timeline-padding-horizontal: 15px;
  20.   --f7-timeline-margin-vertical: 35px;
  21.   --f7-timeline-divider-margin-horizontal: 15px;
  22.   --f7-timeline-inner-block-margin-vertical: 15px;
  23.   --f7-timeline-item-inner-border-radius: 7px;
  24.   --f7-timeline-item-inner-box-shadow: none;
  25.   --f7-timeline-item-time-font-size: 13px;
  26.   --f7-timeline-item-time-text-color: #6d6d72;
  27.   --f7-timeline-item-title-font-size: 17px;
  28.   --f7-timeline-item-title-line-height: inherit;
  29.   --f7-timeline-item-title-font-weight: 600;
  30.   --f7-timeline-item-subtitle-font-size: 15px;
  31.   --f7-timeline-item-subtitle-line-height: inherit;
  32.   --f7-timeline-item-text-font-size: inherit;
  33.   --f7-timeline-item-text-color: inherit;
  34.   --f7-timeline-item-text-line-height: inherit;
  35.   --f7-timeline-year-font-size: 16px;
  36.   --f7-timeline-horizontal-item-padding: 10px;
  37.   --f7-timeline-horizontal-item-border-color: #c4c4c4;
  38.   --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
  39.   --f7-timeline-horizontal-item-date-shadow-image: none;
  40. }
  41. .ios .theme-dark,
  42. .ios.theme-dark {
  43.   --f7-timeline-item-time-text-color: #8E8E93;
  44. }
  45. .md {
  46.   --f7-timeline-padding-horizontal: 16px;
  47.   --f7-timeline-margin-vertical: 32px;
  48.   --f7-timeline-divider-margin-horizontal: 16px;
  49.   --f7-timeline-inner-block-margin-vertical: 16px;
  50.   --f7-timeline-item-inner-border-radius: 4px;
  51.   --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  52.   --f7-timeline-item-time-font-size: 13px;
  53.   --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  54.   --f7-timeline-item-title-font-size: 16px;
  55.   --f7-timeline-item-title-line-height: inherit;
  56.   --f7-timeline-item-title-font-weight: 400;
  57.   --f7-timeline-item-subtitle-font-size: inherit;
  58.   --f7-timeline-item-subtitle-line-height: inherit;
  59.   --f7-timeline-item-text-font-size: inherit;
  60.   --f7-timeline-item-text-line-height: inherit;
  61.   --f7-timeline-item-text-color: inherit;
  62.   --f7-timeline-year-font-size: 16px;
  63.   --f7-timeline-horizontal-item-padding: 12px;
  64.   --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  65.   --f7-timeline-horizontal-item-date-border-color: transparent;
  66.   --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  67. }
  68. .md .theme-dark,
  69. .md.theme-dark {
  70.   --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  71. }
  72. .aurora {
  73.   --f7-timeline-padding-horizontal: 10px;
  74.   --f7-timeline-margin-vertical: 15px;
  75.   --f7-timeline-divider-margin-horizontal: 15px;
  76.   --f7-timeline-inner-block-margin-vertical: 15px;
  77.   --f7-timeline-item-inner-border-radius: 4px;
  78.   --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  79.   --f7-timeline-item-time-font-size: 12px;
  80.   --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  81.   --f7-timeline-item-title-font-size: 14px;
  82.   --f7-timeline-item-title-line-height: 1.3;
  83.   --f7-timeline-item-title-font-weight: 600;
  84.   --f7-timeline-item-subtitle-font-size: 14px;
  85.   --f7-timeline-item-subtitle-line-height: 1.3;
  86.   --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  87.   --f7-timeline-item-text-font-size: 12px;
  88.   --f7-timeline-item-text-line-height: 1.33;
  89.   --f7-timeline-year-font-size: 14px;
  90.   --f7-timeline-year-font-weight: 500;
  91.   --f7-timeline-horizontal-item-padding: 10px;
  92.   --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  93.   --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  94.   --f7-timeline-horizontal-item-date-shadow-image: none;
  95. }
  96. .aurora .theme-dark,
  97. .aurora.theme-dark {
  98.   --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
  99.   --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
  100. }