SOrderedList <s-ordered-list>

带编号的列表。 SOrderedList 是 Shopify Polaris <s-ordered-list> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 在顺序有意义时使用。 编号列表传达顺序、优先级或排名，因此适合分步说明或排序后的建议。如果顺序无关紧要，请改用 SUnorderedList。
• 以相同方式书写各项。 让每一项的语法和结构保持一致，使列表读起来顺畅。各项之间风格不一会让读者更费力。
• 让每一项保持简短。 列表的价值在于便于快速浏览。如果某些项变得冗长或复杂，可以考虑将其拆分为独立的部分。
• 不要嵌套过深。 一层嵌套可以组织相关要点，但超过两层就会难以理解，这说明内容需要换一种结构。

<SOrderedList>
  <SListItem>Choose a shipping carrier</SListItem>
  <SListItem>Print the shipping label</SListItem>
  <SListItem>Mark the order as fulfilled</SListItem>
</SOrderedList>

参阅 Shopify 关于 <s-ordered-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>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <!-- SOrderedList renders its SListItem children as a numbered list. -->
    <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	OrderededList 的内容。只接受 ListItem 组件。
id	string | undefined	元素的唯一标识符。

Slots

Slot	说明
default	有序列表中显示的列表条目，每一项按顺序编号。只接受列表项组件作为子元素。每个列表项表示序列中的一个编号条目。