SOrderedList `<s-ordered-list>`

番号付きリスト。 SOrderedList は、Shopify Polaris の <s-ordered-list> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

順序に意味があるときに使う。 番号付きリストは順序、優先度、ランキングを伝えるため、手順の説明やランク付けされたおすすめに適しています。順序が関係ない場合は、代わりに SUnorderedList を使います。
項目の書き方をそろえる。 すべての項目の文法と構造をそろえ、リストを読みやすくします。項目ごとにスタイルが変わると、読み手の負担が増えます。
各項目を短くする。 リストが役立つのは、すばやく見渡せるからです。項目が長くなったり込み入ったりする場合は、それぞれ独立したセクションに分けることを検討します。
ネストを深くしすぎない。 1 段階のネストは関連する要点の整理に役立ちますが、2 段階を超えると追いにくくなり、コンテンツに別の構造が必要であることを示しています。

vue

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

詳しいガイダンスについては、<s-ordered-list> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Free shipping over $50

30-day returns

24/7 customer support

Add items to your cart

Review your order

Confirm and check out

vue

<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`	順序付きリスト内に表示されるリスト項目です。各項目には連番が付けられます。子要素としてリストアイテムコンポーネントのみを受け付けます。各リストアイテムは、連番付きの 1 つの項目を表します。

SOrderedList <s-ordered-list> ​

ベストプラクティス ​

例 ​

Props ​

Slots ​

SOrderedList `<s-ordered-list>`

ベストプラクティス

例

Props

Slots