CSS: badge ​

.instui-badge — लक्ष्य के कोने पर रखा गया छोटा काउंट या स्थिति बिंदु।

एक बैज को लक्ष्य पर रखने के लिए, दोनों को एक .instui-badge-wrapper (स्थिति एंकर) में लपेटें और बैज को -placement-* मोडिफायर से पिन करें।

Source: badge.css

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

डेमो ​

उदाहरण ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

संरचना ​

बैज स्वयं इनलाइन रेंडर करता है, या वैकल्पिक instui-badge-wrapper के अंदर जो इसे लक्ष्य के ऊपर एंकर करता है।

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-color-dangerध्यान/त्रुटि गिनती।
.-color-inverseOn-dark: a light chip with dark text.
.-color-successसकारात्मक/समाप्त गिनती।
.-placement-bottom-endनीचे-एंड कोने पर स्थिति।
.-placement-bottom-startनीचे-स्टार्ट कोने पर स्थिति।
.-placement-end-centerएंड एज के केंद्रित स्थान पर स्थिति।
.-placement-start-centerस्टार्ट एज के केंद्रित स्थान पर स्थिति।
.-placement-top-endऊपर-एंड कोने पर स्थिति।
.-placement-top-startऊपर-स्टार्ट कोने पर स्थिति।
.-pulseएक पल्सिंग ध्यान रिंग।
.-standaloneइनलाइन रेंडर करें, लक्ष्य के कोने पर स्थित न करें।
.-type-notificationकेवल एक बिंदु, कोई गिनती नहीं।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::beforeबैज के एक्सेंट रंग में ड्रॉ किया गया पल्सिंग ध्यान रिंग (वैरिएंट -pulse)।

कस्टम प्रॉपर्टीज ​

प्रॉपर्टीप्रकारडिफ़ॉल्टविवरण
--pantoken-badge-accent<color>—चिप भराव; प्रत्येक -color-* वैरिएंट और पल्स रिंग यही से पढ़ते हैं।
--pantoken-badge-text<color>—टेक्स्ट का रंग, एक्सेंट के साथ जोड़ा गया ताकि पठनीयता बनी रहे।

एनिमेशन्स ​

एनिमेशनविवरण
pantoken-badge-pulseपल्स रिंग एनिमेशन।

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

संबंधित ​

  • pill — इनलाइन लेबल-चिप समकक्ष।