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 based on responsive breakpoint. For example, for tablet devices (width >= 786px) we need to add medium-sides class to main timeline element. For full set of such responsive classes check Grid docs. They are xsmall-sides, small-sides, medium-sides, large-sides, xlarge-sides.

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

← Text Editor

Toast →