列表

列表样式类型

使用listStyleType 属性设置列表标记的类型。

<Box as="ul" listStyleType="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

属性	CSS 属性	令牌类别
listStyleType	list-style-type	-

列表样式位置

使用 listStylePosition 属性设置列表标记的位置。

<Box as="ul" listStylePosition="inside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

属性	CSS 属性	令牌类别
listStylePosition	list-style-position	-

列表样式图片

使用 listStyleImage 属性设置列表标记的图片。

<Box as="ul" listStyleImage="url(...)">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

属性	CSS 属性	令牌类别
listStyleImage	list-style-image	资产

标记

使用 _marker 属性设置列表项的标记。

<ul>
  <Box as="li" _marker={{ color: "red" }}>
    Item 1
  </Box>
  <Box as="li" _marker={{ color: "blue" }}>
    Item 2
  </Box>
  <Box as="li" _marker={{ color: "green" }}>
    Item 3
  </Box>
</ul>