Vuetify

商店

企业版

v-timeline 在样式上显示时间顺序信息时很有用。

v-timeline 以其最简单的形式显示一条垂直时间线,其中应至少包含一个 v-timeline-item

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

small 属性允许多种样式提供独特的设计。

有条件地使用 v-timeline-item 点内的图标来提供其他上下文。

您可以使用 reverse 属性来反转时间轴项目的方向。这在默认和 dense 模式下都能工作。

如果将 v-card 放置在 v-timeline-item 的内部,则插入符会出现在卡的侧面。

dense 时间线将所有内容定位在右侧。 在此示例中,v-alert 替换了卡片以提供不同的设计。

opposite 插槽在您的时间线内提供额外的自定义层。

使用 icon 插槽和 v-avatar,将头像插入点中。

彩色的点可以创建可视的断点,使您的时间线更容易阅读。

模块化组件允许您创建高度定制的解决方案。

想要了解更多?继续阅读:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!