Skip to content

SListItem <s-list-item> ​

순서 있는 목록 또는 순서 없는 목록 안의 항목 하나입니다. SListItem은(는) Shopify Polaris <s-list-item> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

ts
import { SListItem } from 'polaris-vue-elements'

예시 ​

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm 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 is the only accepted child of SUnorderedList/SOrderedList. -->
      <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타입설명
childrenany리스트 아이템 안에 표시되는 콘텐츠입니다. 순서 있는 목록 또는 순서 없는 목록의 단일 항목을 나타냅니다.
idstring | undefined요소의 고유 식별자입니다.

Slots ​

Slot설명
default리스트 아이템 안에 표시되는 콘텐츠입니다. 순서 있는 목록 또는 순서 없는 목록의 단일 항목을 나타냅니다.

MIT 라이선스로 배포됩니다. Vue 로고: Evan You, CC BY-NC-SA 4.0.