SOrderedList <s-ordered-list>

एक क्रमांकित सूची। SOrderedList Shopify के Polaris <s-ordered-list> web component का typed Vue 3 wrapper है।

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

Best practices

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

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

Slots

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