List 列表

有序列表与无序列表。

接入依赖并引入样式入口
在应用的最外层挂载浮层容器
按需引入组件

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

export default function Demo() {
  return (
    <List className="max-w-md">
      <ListItem>接入依赖并引入样式入口</ListItem>
      <ListItem>在应用的最外层挂载浮层容器</ListItem>
      <ListItem>按需引入组件</ListItem>
    </List>
  )
}

tsx

用法

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

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

无序列表的第一项
无序列表的第二项

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

export default function Demo() {
  return (
    <List className="max-w-md">
      <ListItem>无序列表的第一项</ListItem>
      <ListItem>无序列表的第二项</ListItem>
    </List>
  )
}

tsx

示例

有序列表

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

安装依赖
引入样式
启动开发服务器

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

export default function Demo() {
  return (
    <List ordered className="max-w-md">
      <ListItem>安装依赖</ListItem>
      <ListItem>引入样式</ListItem>
      <ListItem>启动开发服务器</ListItem>
    </List>
  )
}

tsx

嵌套

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

排版
- Text
- Heading
原子
- Button
- Tag

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

export default function Demo() {
  return (
    <List className="max-w-md">
      <ListItem>
        排版
        <List>
          <ListItem>Text</ListItem>
          <ListItem>Heading</ListItem>
        </List>
      </ListItem>
      <ListItem>
        原子
        <List>
          <ListItem>Button</ListItem>
          <ListItem>Tag</ListItem>
        </List>
      </ListItem>
    </List>
  )
}

tsx

序号的起点与方向

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

从第五项开始
接着第六项

倒序的第一项
倒序的第二项

import { List, ListItem, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-md">
      <List ordered start={5}>
        <ListItem>从第五项开始</ListItem>
        <ListItem>接着第六项</ListItem>
      </List>
      <List ordered reversed>
        <ListItem>倒序的第一项</ListItem>
        <ListItem>倒序的第二项</ListItem>
      </List>
    </Stack>
  )
}

tsx

正文中的列表

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

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

无序列表
与组件的呈现一致

有序列表
同样如此

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-md">
      <p>正文中的列表不需要单独引入组件。</p>
      <ul>
        <li>无序列表</li>
        <li>与组件的呈现一致</li>
      </ul>
      <ol>
        <li>有序列表</li>
        <li>同样如此</li>
      </ol>
    </Prose>
  )
}

tsx

API

List

属性	类型	默认值	说明
`ordered`	`boolean`	`false`	是否渲染为有序列表
`className`	`string`	—	追加至根元素的类名

属性	说明
`children`	列表的条目

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

ListItem

属性	类型	默认值	说明
`className`	`string`	—	追加至根元素的类名

属性	说明
`children`	条目的内容，可嵌套子列表

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

用法

示例

有序列表

嵌套

序号的起点与方向

正文中的列表

无障碍

API

List

ListItem