SUnorderedList <s-unordered-list>

글머리 기호 목록입니다. SUnorderedList은(는) Shopify Polaris <s-unordered-list> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 순서가 중요하지 않을 때 사용하세요. 순서 없는 목록은 기능, 옵션, 장점처럼 관련된 항목을 순서나 순위 없이 보여 줍니다. 순서가 중요하다면 대신 SOrderedList를 사용합니다.
• 항목을 같은 형태로 작성하세요. 모든 항목에 같은 문법 구조를 사용하면 목록을 훑어보기 쉽습니다. 한 목록 안에서 작성 스타일을 섞으면 읽기 어려워집니다.
• 항목을 짧게 작성하세요. 목록은 각 항목이 간결할 때 가장 효과적입니다. 항목이 길어지거나 복잡해지면 콘텐츠를 별도 섹션으로 나누는 것을 고려합니다.
• 중첩을 제한하세요. 중첩 목록은 계층적인 콘텐츠를 정리할 수 있지만 금방 따라가기 어려워집니다. 두 단계보다 깊은 중첩이 필요하다면 그 콘텐츠는 목록에 맞지 않을 수 있습니다.

전체 가이드는 <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	순서 없는 목록 안에 표시되는 목록 항목으로, 각 항목에 글머리 기호가 표시됩니다. 자식으로 리스트 아이템 컴포넌트만 허용합니다. 각 리스트 아이템은 목록의 글머리 기호가 붙은 단일 항목을 나타냅니다.