SUnorderedList <s-unordered-list>

箇条書きリスト。 SUnorderedList は、Shopify Polaris の <s-unordered-list> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 順序が重要でないときに使う。 箇条書きリストは、機能、オプション、メリットなどの関連する項目を、順序やランキングなしで示します。順序が重要な場合は、代わりに SOrderedList を使います。
• 項目の形をそろえる。 すべての項目の文法構造をそろえ、リストを見渡しやすくします。1 つのリストに異なる書き方が混ざると読みにくくなります。
• 項目は短く書く。 リストは各項目が簡潔なときに最も効果を発揮します。項目が長くなったり複雑になったりする場合は、コンテンツを別々のセクションに分けることを検討します。
• ネストを制限する。 ネストしたリストは階層的なコンテンツの整理に役立ちますが、すぐに追いにくくなります。2 段階を超える必要があるなら、そのコンテンツはリストに向いていないかもしれません。

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

例

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