条目栏

条目栏

条目栏用一行说明一件事物:它是什么、叫什么、由什么限定,以及最右端放什么。它是一种外形,而不是绑定——实体通过自己的模板使用它,而作为文件、应用或设置的搜索结果也使用完全相同的标记。

条目栏本身

除标题外一切皆可选。开头插槽放图标,需要真实头像时也可放任意标记;末尾插槽放日期、标签或一排按钮。若提供链接,整行宽度都可点击,标题保持所在位置的颜色。
只有标题
带开头图标
Maya Lindqvist
maya@example.com
季度报告
14 份文档
作为链接的条目栏
整行宽度都可点击

结果列表

列表提供外框、搜索框和分隔线;每一行是一个条目栏。这里没有任何实体——这正是重点:同样的行可用于人员、文档、应用和偏好设置。

简单列表

外框已经存在时,带分隔线的垂直堆叠就足够了——没有自己的外形,只是两行之间的一条线。
Maya Lindqvist
所有者
Sam Okonkwo
编辑
夜间导入
服务账户

各自独立的底面

列表的另一种呈现——没有共同背景,也没有分隔线,每个条目栏立于自己的区块上,四周留有空间。无需新的样式,条目栏直接使用区块的类;若提供链接,整张卡片都可点击。
Maya Lindqvist
所有者
Sam Okonkwo
编辑
夜间导入
服务账户

发现的问题

分析报告的内容,每项一个条目栏:问题作为标题,位置作为副标题,可执行的操作放在末尾插槽——若此处无法处理则留空。严重程度即区块的色调,开头的头像也随之着色。
缺少必需的章节“目的”
01-PROCESSES/PR-004-document-control.md
审核日期已过
01-PROCESSES/PR-004-document-control.md:4
负责人字段为空
草稿不受影响,审核前必须填写

Vue 中的条目栏列表

同样的行从接口读取而不是直接写出:列表负责页面、翻页和空状态,每个实体说明要显示的内容——标题、限定信息、图标、链接目标,以及最右端的日期。上面几种呈现是它的变体,`divided` 和 `surfaces`。

并保持更新

条目栏列表和其他集合一样,因此集合获知变化的三种方式都适用:应用事件、实时数据源、轮询。这个示例监听一个事件——触发它,看着各行重新出现。三种方式的并排对比见“实时更新”。