列表

列表样式类型

¥List Style Type

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

¥Use the listStyleType property to set the type of the list marker.

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

属性	CSS 属性	标记类别
listStyleType	list-style-type	*

列表样式位置

¥List Style Position

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

¥Use the listStylePosition property to set the position of the list marker.

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

属性	CSS 属性	标记类别
listStylePosition	list-style-position	*

列表样式图片

¥List Style Image

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

¥Use the listStyleImage property to set the image of the list marker.

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

属性	CSS 属性	标记类别
listStyleImage	list-style-image	assets

标记

¥Markers

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

¥Use the _marker property to set the marker of a list item.

<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>