赞助商成为赞助商
- 入门
- 事件
- 路由器 / 导航
- 存储
- 组件
- 应用程序 / 核心
- 手风琴 / 可折叠
- 操作表 / 操作
- 面积图
- 自动完成
- 徽章
- 区块 / 内容区块
- 面包屑
- 按钮
- 日历 / 日期选择器
- 卡片
- 复选框
- 标签 / 标记
- 拾色器
- 联系人列表
- 数据表
- 对话框
- 悬浮操作按钮 / FAB
- 表单数据 / 存储
- 量规表
- 网格 / 布局网格
- 图标
- 无限滚动
- 输入 / 表单输入
- 链接
- 列表按钮
- 列表视图
- 列表索引
- 登录界面
- 菜单列表
- 消息栏
- 消息
- 导航栏
- 通知
- 页面
- 面板 / 侧边面板
- 照片浏览器
- 选择器
- 饼状图
- 弹出框
- 弹出窗口
- 预加载器
- 进度条
- 下拉刷新
- 单选按钮
- 范围滑动条
- 搜索栏
- 分段选择器
- 表单模态窗口
- 骨架屏
- 智能选择器
- 可排序列表
- 状态栏
- 步进器
- 子导航栏
- 轻扫操作
- Swiper
- 标签栏
- 文本编辑器
- 时间线
- 吐司消息
- 切换开关
- 工具栏 / Tabbar
- 工具提示
- 树状视图
- 视图 / 路由
- 虚拟列表
- Framework7 图标
- 样式
- Dom7
- 触摸实用程序
- 实用程序
- 插件 API
- 延迟加载模块
- 自定义构建
时间线
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>其中
timeline- 主时间轴包装元素。必需timeline-item- 单个时间轴项。必需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- 项目文本。可选
纵向时间轴示例
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>纵向时间轴并排
纵向时间轴提供“并排”模式，其中每个下一个项目将在不同的一侧。要启用“并排”模式，你需要为主 timeline 元素添加 timeline-sides 类。
还可以根据响应式断点启用此模式。例如，对于平板电脑设备（宽度 >= 786px），我们需要为主时间轴元素添加 medium-sides 类。有关此类响应式类的完整设置，请查看 网格文档。它们是 xsmall-sides、small-sides、medium-sides、large-sides、xlarge-sides。
要强制时间轴元素到所需的一侧，我们可以在单个时间轴元素 timeline-item 上使用额外的 timeline-item-left 和 timeline-item-right 类
<!-- 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 元素上有一个额外的 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);
}