时间轴(Timeline)

时间轴是按时间顺序显示事件列表。 它通常是一个平面设计，显示一个旁边标有日期的长条，通常用来展示事件。 时间轴可以使用任何时间尺度，具体取决于主题和数据。

QTimelines有3个媒体断点。 在桌面上查看并单击右侧的“桌面视图”链接，然后调整浏览器窗口的大小以查看正在运行的媒体断点。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QTimeline',
    'QTimelineEntry'
  ]
}

基本用法

<q-timeline color="secondary">
  <q-timeline-entry heading>
    Timeline Subject
  </q-timeline-entry>

  <q-timeline-entry
    title="Event Title"
    subtitle="February 22, 1986"
    side="left"
  >
    <div>
      Lorem ipsum dolor sit amet.
    </div>
  </q-timeline-entry>
</q-timeline>

QTimeline（父元素）Vue属性

Vue属性 类型 说明
color 字符串 时间轴元素的颜色
dark 布尔 在黑暗背景下渲染时。

QTimelineEntry（子元素）Vue属性

Vue属性 类型 说明
heading 布尔 显示时间线主题，帮助将时间线条目分组为单独的块。
tag 字符串 用于渲染时间轴条目DOM元素的HTML标记。
side 布尔 在更宽的窗口中，您可以选择在哪一边显示此条目。 默认是在右侧。
icon 字符串 要使用的图标。
color 字符串 用于此条目的颜色。
title 字符串 条目标题。
subtitle 字符串 条目副标题。
聊天 平移触摸