SUnorderedList <s-unordered-list>

Một danh sách gạch đầu dòng. SUnorderedList là Vue 3 wrapper có type cho web component <s-unordered-list> của Shopify Polaris.

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

Best practices

• Dùng khi thứ tự không quan trọng. Danh sách không thứ tự trình bày các mục liên quan, như tính năng, tùy chọn hoặc lợi ích, không theo trình tự hay xếp hạng. Khi trình tự quan trọng, hãy dùng SOrderedList.
• Giữ các mục song song. Cho mọi mục cùng cấu trúc ngữ pháp để danh sách dễ đọc lướt. Trộn nhiều cách viết trong một danh sách khiến nó khó đọc hơn.
• Viết các mục ngắn. Danh sách hiệu quả nhất khi mỗi mục ngắn gọn. 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 nội dung thành các phần riêng.
• Hạn chế lồng nhau. Danh sách lồng nhau có thể sắp xếp nội dung phân cấp, nhưng nhanh chóng trở nên khó theo dõi. Nếu bạn cần nhiều hơn hai cấp, có thể nội dung không hợp với dạng danh sách.

Xem best practices của Shopify cho <s-unordered-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 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	Kiểu	Mô tả
children	any	Nội dung của UnorderededList. 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 không thứ tự, trong đó mỗi mục được đánh dấu bằng một dấu chấm đầu dòng. 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ó dấu đầu dòng trong danh sách.