SOrderedList <s-ordered-list>

Một danh sách đánh số. SOrderedList là Vue 3 wrapper có type cho web component <s-ordered-list> của Shopify Polaris.

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

Best practices

• Dùng khi thứ tự có ý nghĩa. Danh sách đánh số thể hiện thứ tự, mức ưu tiên hoặc xếp hạng, nên phù hợp với hướng dẫn từng bước hoặc các đề xuất được xếp hạng. Nếu thứ tự không quan trọng, hãy dùng SUnorderedList.
• Viết các mục theo cùng một cách. Cho mọi mục cùng ngữ pháp và cấu trúc để danh sách dễ đọc. Đổi cách viết giữa các mục khiến người đọc phải vất vả hơn.
• Giữ mỗi mục ngắn gọn. Danh sách hiệu quả vì dễ lướt nhanh. Nếu các mục trở nên dài hoặc phức tạp, hãy cân nhắc tách chúng thành các phần riêng.
• Đừng lồng quá sâu. Một cấp lồng có thể giúp sắp xếp các ý liên quan, nhưng vượt quá hai cấp sẽ khó theo dõi và cho thấy nội dung cần một cấu trúc khác.

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

Xem best practices của Shopify cho <s-ordered-list> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
children	any	Nội dung của OrderededList. Chỉ chấp nhận các component ListItem.
id	string | undefined	Định danh duy nhất của phần tử.

Slots

Slot	Mô tả
default	Các mục hiển thị trong danh sách có thứ tự, trong đó mỗi mục được đánh số tuần tự. Chỉ chấp nhận component list item làm phần tử con. Mỗi list item đại diện cho một mục được đánh số trong chuỗi.