SUnorderedList <s-unordered-list>

带项目符号的列表。 SUnorderedList 是 Shopify Polaris <s-unordered-list> web component 的带类型 Vue 3 wrapper。

import { SUnorderedList } from 'polaris-vue-elements'

最佳实践

• 在顺序无关紧要时使用。 无序列表用于展示相关的项目（例如功能、选项或优势），不涉及顺序或排名。当顺序重要时，请改用 SOrderedList。
• 保持各项结构一致。 让每一项采用相同的语法结构，使列表易于浏览。在同一个列表中混用不同的写法会使其更难阅读。
• 编写简短的项目。 每一项都简短时，列表效果最好。如果项目变得冗长或复杂，可以考虑将内容拆分为独立的部分。
• 限制嵌套。 嵌套列表可以组织层级内容，但很快就会变得难以理解。如果需要两层以上，这些内容可能并不适合用列表呈现。

参阅 Shopify 关于 <s-unordered-list> 的最佳实践（英文）以获取完整指南。

示例

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm and check out

<script setup>
import { SUnorderedList, SOrderedList, SListItem, SStack } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large-500" alignItems="start">
    <!-- SUnorderedList renders its SListItem children as a bulleted list. -->
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <SOrderedList>
      <SListItem>Add items to your cart</SListItem>
      <SListItem>Review your order</SListItem>
      <SListItem>Confirm and check out</SListItem>
    </SOrderedList>
  </SStack>
</template>

Props

Prop	类型	说明
children	any	UnorderededList 的内容。只接受 ListItem 组件。
id	string | undefined	元素的唯一标识符。

Slots

Slot	说明
default	无序列表中显示的列表条目，每一项以项目符号标记。只接受列表项组件作为子元素。每个列表项表示列表中的一个带项目符号的条目。