为 Vue 构建的界面语言。 v1.7.16 已发布
UI
开始设计规范组件变更记录
GitHub 仓库10

List 列表

有序列表与无序列表。

源码
  • 接入依赖并引入样式入口
  • 在应用的最外层挂载浮层容器
  • 按需引入组件
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>接入依赖并引入样式入口</ListItem>
    <ListItem>在应用的最外层挂载浮层容器</ListItem>
    <ListItem>按需引入组件</ListItem>
  </List>
</template>
vue

用法

import { List, ListItem } from '@hina-ui/vue'
ts

List 默认渲染为 ul，条目用 ListItem，渲染为 li。列表带有缩进，项目符号使用比正文更淡的颜色。

  • 无序列表的第一项
  • 无序列表的第二项
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>无序列表的第一项</ListItem>
    <ListItem>无序列表的第二项</ListItem>
  </List>
</template>
vue

示例

有序列表

设置 ordered 渲染为 ol，项目符号变为序号。

  1. 安装依赖
  2. 引入样式
  3. 启动开发服务器
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List ordered class="max-w-md">
    <ListItem>安装依赖</ListItem>
    <ListItem>引入样式</ListItem>
    <ListItem>启动开发服务器</ListItem>
  </List>
</template>
vue

嵌套

条目中可以嵌套列表，缩进逐层累加。

  • 排版
    • Text
    • Heading
  • 原子
    • Button
    • Tag
<script setup lang="ts">
  import { List, ListItem } from '@hina-ui/vue'
</script>

<template>
  <List class="max-w-md">
    <ListItem>
      排版
      <List>
        <ListItem>Text</ListItem>
        <ListItem>Heading</ListItem>
      </List>
    </ListItem>
    <ListItem>
      原子
      <List>
        <ListItem>Button</ListItem>
        <ListItem>Tag</ListItem>
      </List>
    </ListItem>
  </List>
</template>
vue

序号的起点与方向

组件不拦截属性，ol 的原生属性可以直接书写：start 指定起始序号，reversed 让序号递减。

  1. 从第五项开始
  2. 接着第六项
  1. 倒序的第一项
  2. 倒序的第二项
<script setup lang="ts">
  import { List, ListItem, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-md">
    <List ordered :start="5">
      <ListItem>从第五项开始</ListItem>
      <ListItem>接着第六项</ListItem>
    </List>
    <List ordered reversed>
      <ListItem>倒序的第一项</ListItem>
      <ListItem>倒序的第二项</ListItem>
    </List>
  </Stack>
</template>
vue

正文中的列表

Prose 会为其中的原生 ul 与 ol 应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的列表不需要单独引入组件。

  • 无序列表
  • 与组件的呈现一致
  1. 有序列表
  2. 同样如此
<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-md">
    <p>正文中的列表不需要单独引入组件。</p>
    <ul>
      <li>无序列表</li>
      <li>与组件的呈现一致</li>
    </ul>
    <ol>
      <li>有序列表</li>
      <li>同样如此</li>
    </ol>
  </Prose>
</template>
vue

无障碍

  • 组件渲染为原生的 ul 或者 ol，屏幕阅读器会播报条目数量。
  • 条目必须是列表的直接子元素，中间不应插入其他容器，否则朗读出的条目数量会出错。

API

List

属性
类型
默认值
说明
ordered
boolean
false
是否渲染为有序列表
class
string
—
追加至根元素的类名
插槽
说明
default
列表的条目

其余属性传递至根元素，例如 start 与 reversed。

ListItem

属性
类型
默认值
说明
class
string
—
追加至根元素的类名
插槽
说明
default
条目的内容，可嵌套子列表

其余属性传递至根元素，例如在有序列表中用 value 指定单个条目的序号。