SUnorderedList <s-unordered-list>

एक bulleted सूची। SUnorderedList Shopify के Polaris <s-unordered-list> web component का typed Vue 3 wrapper है।

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

Best practices

• इसका उपयोग तब करें जब क्रम मायने न रखे। Unordered list संबंधित items, जैसे features, विकल्प या लाभ, को बिना किसी क्रम या रैंकिंग के प्रस्तुत करती है। जब क्रम मायने रखे, तो इसके बजाय SOrderedList का उपयोग करें।
• Items को समानांतर रखें। हर item को समान व्याकरणिक संरचना दें ताकि list को scan करना आसान हो। एक ही list में लेखन शैलियाँ मिलाने से उसे पढ़ना कठिन हो जाता है।
• छोटे items लिखें। Lists तब सबसे अच्छी काम करती हैं जब हर item संक्षिप्त हो। अगर items लंबे या जटिल हो जाएँ, तो content को अलग sections में बाँटने पर विचार करें।
• Nesting सीमित रखें। Nested lists पदानुक्रमित content को व्यवस्थित कर सकती हैं, लेकिन उन्हें समझना जल्दी कठिन हो जाता है। अगर आपको दो से अधिक स्तरों की ज़रूरत है, तो शायद वह content list के लिए उपयुक्त नहीं है।

सभी सुझावों के लिए <s-unordered-list> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	Type	विवरण
children	any	UnorderededList की सामग्री। केवल ListItem components स्वीकार करता है।
id	string | undefined	element के लिए एक unique identifier।

Slots

Slot	विवरण
default	unordered list के अंदर दिखाई जाने वाली list entries, जिनमें हर item bullet point से चिह्नित होता है। children के रूप में केवल list item components स्वीकार करता है। हर list item list में एक bulleted entry को दर्शाता है।