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>

전체 가이드는 <s-ordered-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>
      <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	순서 있는 목록 안에 표시되는 목록 항목으로, 각 항목에 순서대로 번호가 매겨집니다. 자식으로 리스트 아이템 컴포넌트만 허용합니다. 각 리스트 아이템은 순서 안의 번호가 매겨진 단일 항목을 나타냅니다.