SDivider <s-divider>

एक horizontal या vertical रेखा जो content को अलग करती है। SDivider Shopify के Polaris <s-divider> web component का typed Vue 3 wrapper है।

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

Best practices

• सिर्फ़ वास्तव में अलग content को ही अलग करें। Dividers उन sections के बीच ही ठीक लगते हैं जो साफ़ तौर पर अलग हों। बहुत ज़्यादा dividers interface को भरा-भरा और टूटा हुआ दिखाते हैं, इसलिए जाँच लें कि क्या whitespace से content उतनी ही अच्छी तरह समूह में आ जाएगा।
• Divider का वज़न विभाजन के अनुसार रखें। Divider की प्रमुखता से पता चलना चाहिए कि विभाजन कितना अहम है: किसी बड़े section break के लिए color="strong" लिया जा सकता है, जबकि छोटे समूह के लिए हल्की line या सिर्फ़ जगह काफ़ी है।
• Layout की दिशा का पालन करें। direction सेट करें ताकि line उस content के प्रवाह के आर-पार चले जिसे वह अलग करती है, चाहे items ऊपर-नीचे रखे हों या अगल-बगल।
• पहले spacing आज़माएँ। आपके layout components के spacing props अक्सर line से ज़्यादा साफ़ तरीके से content को समूह में रखते हैं। चीज़ें साफ़ करने के लिए divider जोड़ें, अच्छी तरह से योजनाबद्ध spacing के विकल्प के रूप में नहीं।

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

उदाहरण

Content above the divider.Content below the divider.A stronger divider variant.

<script setup>
import { SDivider, SParagraph } from 'polaris-vue-elements'
</script>

<template>
  <SParagraph>Content above the divider.</SParagraph>
  <SDivider />
  <SParagraph>Content below the divider.</SParagraph>
  <SDivider color="strong" />
  <SParagraph color="subdued">A stronger divider variant.</SParagraph>
</template>

Props

Prop	Type	विवरण
color	"base" | "strong"	divider line की visual प्रमुखता। - base: अधिकांश विभाजनों के लिए सामान्य divider (डिफ़ॉल्ट) - strong: बड़े section विभाजनों के लिए अधिक प्रमुख divider
direction	"block" | "inline"	divider line की दिशा, logical properties का उपयोग करते हुए। - inline: ऊपर-नीचे रखी सामग्री को अलग करने के लिए horizontal divider - block: अगल-बगल रखी सामग्री को अलग करने के लिए vertical divider