条目栏
条目栏
条目栏用一行说明一件事物:它是什么、叫什么、由什么限定,以及最右端放什么。它是一种外形,而不是绑定——实体通过自己的模板使用它,而作为文件、应用或设置的搜索结果也使用完全相同的标记。
条目栏本身
除标题外一切皆可选。开头插槽放图标,需要真实头像时也可放任意标记;末尾插槽放日期、标签或一排按钮。若提供链接,整行宽度都可点击,标题保持所在位置的颜色。
结果列表
列表提供外框、搜索框和分隔线;每一行是一个条目栏。这里没有任何实体——这正是重点:同样的行可用于人员、文档、应用和偏好设置。
简单列表
外框已经存在时,带分隔线的垂直堆叠就足够了——没有自己的外形,只是两行之间的一条线。
各自独立的底面
列表的另一种呈现——没有共同背景,也没有分隔线,每个条目栏立于自己的区块上,四周留有空间。无需新的样式,条目栏直接使用区块的类;若提供链接,整张卡片都可点击。
发现的问题
分析报告的内容,每项一个条目栏:问题作为标题,位置作为副标题,可执行的操作放在末尾插槽——若此处无法处理则留空。严重程度即区块的色调,开头的头像也随之着色。
Vue 中的条目栏列表
同样的行从接口读取而不是直接写出:列表负责页面、翻页和空状态,每个实体说明要显示的内容——标题、限定信息、图标、链接目标,以及最右端的日期。上面几种呈现是它的变体,`divided` 和 `surfaces`。
并保持更新
条目栏列表和其他集合一样,因此集合获知变化的三种方式都适用:应用事件、实时数据源、轮询。这个示例监听一个事件——触发它,看着各行重新出现。三种方式的并排对比见“实时更新”。