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>