बैज

अवलोकन

link

Web

tanrei-badge

schedule

SwiftUI

TanreiBadge

schedule

Jetpack Compose

TanreiBadge

schedule

Flutter

TanreiBadge

schedule

React Native

Badge

schedule

इससे जनरेट किया गया: docs/status/status.json, specs/badge.spec.json

एक बिंदु और एक गिनती

chatinboxnotifications

इस्तेमाल

link

<!-- कोई गिनती नहीं: बिंदु। बिंदु को लेबल चाहिए। -->
<tanrei-badge label="नए संदेश">
  <tanrei-button variant="text" label="चैट"><span slot="icon">chat</span></tanrei-button>
</tanrei-badge>

<!-- 0 कुछ नहीं बनाता; max (999) से ऊपर की गिनती 999+ के रूप में दिखती है। -->
<tanrei-badge count="3" label="3 अपठित">
  <tanrei-button variant="text" label="इनबॉक्स"><span slot="icon">inbox</span></tanrei-button>
</tanrei-badge>

<script type="module">
  import '@tanrei/web/components/badge';
  import '@tanrei/web/components/button';
  const badge = document.querySelector('tanrei-badge[count]');
  badge.count = unread;
  badge.label = `${unread} अपठित`;
</script>

import { Badge, Button } from '@tanrei/react';

<Badge label="नए संदेश">
  <Button variant="text" label="चैट" onClick={openChat}><span slot="icon">chat</span></Button>
</Badge>
<Badge count={unread} label={`${unread} अपठित`}>
  <Button variant="text" label="इनबॉक्स" onClick={openInbox}><span slot="icon">inbox</span></Button>
</Badge>

import Tanrei

// nil का मतलब बिंदु है।
TanreiBadge(count: nil, label: "नए संदेश") {
  TanreiIconButton("चैट", action: openChat) { Image(systemName: "bubble.left") }
}
TanreiBadge(count: unread, label: "\(unread) अपठित") {
  TanreiIconButton("इनबॉक्स", action: openInbox) { Image(systemName: "tray") }
}

// यही चीज़ किसी भी व्यू पर मॉडिफ़ायर के रूप में।
Image(systemName: "bell").accessibilityLabel("सूचनाएँ").tanreiBadge(1200, label: "999 से ज़्यादा अपठित")

import io.github.chnotchy.tanrei.components.TanreiBadge
import io.github.chnotchy.tanrei.components.TanreiIconButton
import io.github.chnotchy.tanrei.primitives.TanreiText

// null का मतलब बिंदु है।
TanreiBadge(count = null, contentDescription = "नए संदेश") {
    TanreiIconButton(onClick = ::openChat, contentDescription = "चैट") { TanreiText("chat") }
}
TanreiBadge(count = unread, contentDescription = "$unread अपठित") {
    TanreiIconButton(onClick = ::openInbox, contentDescription = "इनबॉक्स") { TanreiText("inbox") }
}

import 'package:tanrei/tanrei.dart';

// कोई गिनती नहीं: बिंदु।
TanreiBadge(
  semanticLabel: 'नए संदेश',
  child: TanreiIconButton(onPressed: openChat, semanticLabel: 'चैट', icon: const Icon(AppSymbols.chat)),
);
TanreiBadge(
  count: unread,
  semanticLabel: '$unread अपठित',
  child: TanreiIconButton(onPressed: openInbox, semanticLabel: 'इनबॉक्स', icon: const Icon(AppSymbols.inbox)),
);

import { Badge, IconButton } from '@tanrei/react-native';

<Badge label="नए संदेश">
  <IconButton accessibilityLabel="चैट" onPress={openChat}>chat</IconButton>
</Badge>
<Badge count={unread} label={`${unread} अपठित`}>
  <IconButton accessibilityLabel="इनबॉक्स" onPress={openInbox}>inbox</IconButton>
</Badge>

स्पेक

link

गिनतियाँ और ऊपरी सीमा

notificationsnotificationsnotificationsnotificationsnotificationsnotifications

संरचना

संरचना

notifications

वेब पैकेज जिस तरह फ़िक्स्चर count-single बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 container	The pill that holds the count: at least as wide as it is high, so a single digit sits in a circle.
2 dot · वैकल्पिक	The container's form when there is no count: a small circle with no label.
3 label · वैकल्पिक	The count, or the capped count followed by a plus sign.
4 outline	A ring outside the dot or the pill that separates the badge from what it overlaps.

माप

माप

notifications

लंबाई	टोकन	मान (px)
container padding-inline	tanrei.comp.badge.container.padding-inline	4
container height	tanrei.comp.badge.container.height	16

वेब पैकेज जिस तरह फ़िक्स्चर count-single बनाता है, उसी के ऊपर बनाया गया।

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
count	number	null	How many things are waiting. Null draws the dot (something is new, the number is unknown or unimportant); 0 draws nothing; above 0 draws the number.
max	number	999	The largest count shown as it is; a larger one shows as max followed by a plus sign (999+).
label	string	""	What assistive technology reads after the anchor's own name ("3 unread"). With no label, the displayed count is read; a dot needs one.

स्लॉट

स्लॉट

विवरण

default

The anchor the badge sits on, which it needs: an icon, an icon-only Button, a navigation item or an avatar. Its first element is the anchor; a badge with no element to sit on draws nothing (BDG-16). In fixtures the anchor is the glyph of the system's icon set that the fixture's content names, drawn at the icon size sys.icon.medium in the color on-surface-variant; its accessible name is that glyph name ("mail"), and the badge adds the fixture's label to it as its value ("mail, 3 unread").

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
BDG-1	WHILE count is null THE badge SHALL draw a circle of diameter comp.badge.dot.size in comp.badge.container.color with no label, its center comp.badge.dot.offset inside the anchor's top-end corner on both axes; the dot is a circle whatever corners the container has.
BDG-2	WHILE count is above 0 THE badge SHALL draw a container at least comp.badge.container.height high and at least as wide as it is high, with comp.badge.container.padding-inline on each side of its label and corners of comp.badge.container.shape, filled with comp.badge.container.color, and the label centered in comp.badge.label.typescale and comp.badge.label.color.
BDG-3	WHILE count is above 0 THE badge SHALL place the center of the container's leading circle (a square of the container's drawn height at its start) comp.badge.container.offset inside the anchor's top-end corner on both axes, so that a longer count grows toward the end, away from the anchor.
BDG-4	WHEN count is greater than max THE badge SHALL show max followed by a plus sign (999+ with the default max) instead of count, and SHALL otherwise show count in full.
BDG-5	WHILE count is 0 THE badge SHALL draw nothing and expose nothing to assistive technology, and its anchor SHALL render and be announced as it would without a badge.
BDG-6	THE badge SHALL draw comp.badge.outline.width of comp.badge.outline.color around the dot or the container, outside its edge, without changing the badge's size or position.
BDG-7	THE badge SHALL NOT change its anchor's size or position, SHALL NOT take space in the layout (it may extend past the anchor's bounds), and SHALL NOT take pointer, touch or keyboard input: input over the badge reaches the anchor.
BDG-8	THE badge SHALL hide its drawn dot and number from assistive technology and SHALL add label to its anchor's accessible description, so that the anchor is announced with its own name followed by label; WHILE label is empty and count is above 0 THE badge SHALL add the displayed text instead (for example 999+).
BDG-9	WHILE count is null and label is empty THE badge SHALL still render, and in debug builds report that the dot tells assistive technology nothing.
BDG-10	WHEN count or label changes THE badge SHALL update its anchor's accessible description and SHALL NOT announce the change by itself.
BDG-11	WHERE the layout direction is right-to-left THE badge SHALL take the anchor's top-left corner as its top-end corner and grow toward the left, and SHALL isolate its label from the surrounding direction so that a capped count keeps its plus sign after the digits.
BDG-12	THE badge SHALL format count and max with the current locale's digits and no grouping separator, and SHALL draw digits with tabular figures where the font has them, so that a changing count does not shift its neighbours.
BDG-13	WHILE the text size is enlarged THE badge SHALL grow its container with its label, keep the center of the leading circle — a square of the grown container's height — at its placement, and keep the dot at comp.badge.dot.size.
BDG-14	IF count is negative or not a number THE badge SHALL render as for 0; IF count is not a whole number THE badge SHALL use it rounded down; IF max is below 1 THE badge SHALL use its default of 999; in each case debug builds SHALL report the value.
BDG-15	THE badge SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the badge is shown THE badge SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.
BDG-16	IF the badge has no anchor THE badge SHALL draw nothing, take no space and expose nothing to assistive technology, whatever its count and label, and in debug builds report that a badge needs an anchor; WHEN an anchor is given to it THE badge SHALL draw itself on that anchor (BDG-1, BDG-3) and describe it (BDG-8) at once, and WHEN its anchor is taken away it SHALL give the anchor back its own description and draw nothing again.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-badge	TanreiBadge	TanreiBadge	TanreiBadge	Badge
count · प्रॉपर्टी	count	count	count	count	count
max · प्रॉपर्टी	max	max	max	max	max
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	label
टिप्पणियाँ	Wraps its anchor in the default slot. No count attribute is the dot. The badge sets aria-description on the slotted anchor and keeps its own shadow content aria-hidden.	TanreiBadge(count: Int?, max:, label:) { anchor }, with a .tanreiBadge(_:max:label:) modifier for the same view (SwiftUI's own .badge works only in lists and tab bars). count: nil is the dot.	One composable plays Material's BadgedBox and Badge together: TanreiBadge(count: Int?, max, contentDescription) { anchor }. count = null is the dot.	As Flutter's Badge.count, with the anchor as child; count: null is the dot (Flutter's plain Badge).	The anchor is children. label is appended to the anchor's accessibilityValue.text, not set as the badge's own accessibilityLabel: the badge itself is not an accessibility element.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-badge-container-color	sys.color.primary	#1b1b1b
--tanrei-comp-badge-container-height	—	16px
--tanrei-comp-badge-container-offset	sys.space.space0	0px
--tanrei-comp-badge-container-padding-inline	sys.space.space50	4px
--tanrei-comp-badge-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-badge-dot-offset	sys.space.space25	2px
--tanrei-comp-badge-dot-size	—	6px
--tanrei-comp-badge-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-badge-outline-color	sys.color.surface	#ffffff
--tanrei-comp-badge-outline-width	sys.border.thick	2px
--tanrei-comp-badge-label-typescale	sys.typescale.label-small	500 12px/1.3333

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

dot

label: New messages

count-single

count: 3 label: 3 unread

count-double

count: 42 label: 42 unread

count-overflow

count: 1200 label: More than 999 unread

count-custom-max

count: 120 max: 99 label: More than 99 unread

count-zero

count: 0 label: No unread messages

इससे जनरेट किया गया: specs/badge.spec.json, tokens/comp/badge.tokens.json, design/tokens/

दिशानिर्देश

link

कब इस्तेमाल करें

link

बैज का इस्तेमाल यह दिखाने के लिए करें कि किसी आइकन, नेविगेशन आइटम या अवतार के पीछे कुछ इंतज़ार कर रहा है: अपठित संदेश, नई गतिविधि, इंस्टॉल करने लायक़ अपडेट। यह नज़र को वहाँ खींचता है जहाँ व्यक्ति उस पर कुछ कर सकता है। बैज के पास न कोई शब्द है, न लेआउट में अपनी कोई जगह, इसलिए यह स्थिति का लेबल नहीं है। किसी स्थिति या श्रेणी का नाम बताने वाले शब्द के लिए, जैसे “New”, “Beta” या “Pro”, टैग इस्तेमाल करें।

बैज, चिप या टैग

link

तीनों में फ़र्क़ इस आधार पर किया जाता है कि वे क्या करते हैं:

कंपोनेंट	यह क्या है	कहाँ रहता है	इनपुट लेता है
बैज	किसी दूसरे एलिमेंट से जुड़ा एक बिंदु या गिनती।	अपने ऐंकर के कोने पर, लेआउट के बाहर।	नहीं। इनपुट ऐंकर तक पहुँचता है।
चिप	एक कंट्रोल।	लेआउट में।	हाँ: इसे दबाया, चालू-बंद किया या हटाया जाता है, और इसके पास फ़ोकस और स्टेट हैं।
टैग	एक स्थिर लेबल।	लेआउट में, इनलाइन।	कभी नहीं।

1. अगर वह किसी दूसरी चीज़ के ऊपर रखी संख्या या बिंदु है, तो वह बैज है।
2. अगर उसे दबाया, चुना या हटाया जाता है, तो वह चिप है। अगर वह कहीं ले जाता है, तो वह लिंक है।
3. अगर वह एक शब्द है जो सिर्फ़ यह बताता है कि कोई चीज़ क्या है या किस स्थिति में है, तो वह टैग है।

जो गिनती किसी पंक्ति में अकेली खड़ी है, जैसे हेडिंग के बग़ल में नतीजों की संख्या, वह भी बैज नहीं है: बैज का हमेशा एक ऐंकर होता है, और जिस बैज के पास बैठने की कोई जगह नहीं, वह कुछ नहीं बनाता। ऐसी गिनती को टेक्स्ट के रूप में लिखें, जो पंक्ति के बाक़ी शब्दों के साथ अपनी ही जगह पर पढ़ी जाए: नेविगेशन ड्रॉअर के किसी आइटम के अंत में वह उस आइटम का trailingText है। जहाँ वह किसी स्थिति का नाम बताए, वहाँ टैग का इस्तेमाल करें।

रूप चुनना

link

रूप count के अनुसार तय होता है, इसलिए चुनने के लिए कोई वेरिएंट नहीं है।

रूप	count	किसके लिए
बिंदु	कोई नहीं (null)	कुछ नया है, और संख्या या तो पता नहीं है या मायने नहीं रखती।
गिनती	0 से ऊपर	संख्या व्यक्ति को यह तय करने में मदद करती है कि अभी देखना है या नहीं: अपठित संदेश, लंबित अनुरोध।
कुछ नहीं	0	कुछ भी इंतज़ार नहीं कर रहा। बैज को सीधे गिनती से बाँधें; उसके चारों ओर किसी शर्त की ज़रूरत नहीं है।

max से ऊपर की गिनती max+ के रूप में दिखती है (डिफ़ॉल्ट रूप से 999+), इसलिए बैज कभी चार कैरेक्टर से आगे नहीं बढ़ता। जहाँ ऐंकर छोटा हो या सटीक संख्या जल्दी ही मायने खो दे, वहाँ max घटा दें (उदाहरण के लिए 99 पर)।

करें

link

• हर बैज को ऐसा लेबल दें जो ऐंकर के नाम के बाद ठीक से पढ़ा जाए: “इनबॉक्स” के बाद “3 अपठित”। बिंदु को इसकी सबसे ज़्यादा ज़रूरत है, क्योंकि इसके बिना बिंदु स्क्रीन रीडर को कुछ नहीं बताता।
• ऐंकर के आसपास जगह छोड़ें। बैज उसके ऊपरी-अंतिम कोने पर बैठता है और उसकी सीमा से बाहर निकल सकता है; वह ऐंकर को कभी खिसकाता या उसका साइज़ नहीं बदलता।
• जब व्यक्ति वह देख ले जिसकी ओर बैज इशारा करता है, तो बैज हटा दें, ताकि उसका कोई मतलब बना रहे।

न करें

link

• हर आइटम पर बैज न लगाएँ। जब सब कुछ चिह्नित हो, तो कुछ भी अलग नहीं दिखता।
• बटन के लेबल पर या चलते टेक्स्ट में बैज न रखें। उसकी जगह आइकन, नेविगेशन आइटम या अवतार पर है। लेबल के बग़ल का या टेक्स्ट की पंक्ति के भीतर का शब्द टैग है।
• यह बताने के लिए कि किस तरह की चीज़ इंतज़ार कर रही है या वह कितनी ज़रूरी है, बैज के रंग का इस्तेमाल न करें। उसे लेबल में कहें, या उस कॉन्टेंट में जिसकी ओर वह इशारा करता है।
• बैज को इंटरैक्टिव न बनाएँ। उस पर किए गए टैप और क्लिक ऐंकर तक पहुँचते हैं, और क्रिया वहीं है।

सुलभता

link

रोल

none

लेबलिंग

The badge has no role or name of its own. label (or, without one, the displayed count) becomes part of the anchor's accessible description, so the anchor is announced as, for example, "Inbox, button, 3 unread". The drawn number is hidden, so it is never read twice.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया

टिप्पणियाँ

• Not interactive: the badge takes no input (BDG-7), so the minimum target is the anchor's and the badge never shrinks or covers it for input.
• A dot conveys its meaning by color and position only, so a dot without a label fails for screen reader users (BDG-9); give it one ("new messages").
• Where the count must be announced when it changes (a live chat), the product uses a live region; the badge does not announce by itself (BDG-10).
• A badge marks an anchor and never stands alone in a line or a row (BDG-16). A count that stands by itself, such as the count at the end of a navigation drawer's row, a tree view's row or a menu item, is text, read in its place as the row's own words: that component's trailing text. A word that names a state is a tag.
• How the description reaches the anchor is each platform's idiom: the web sets it on the slotted anchor (an ID reference cannot cross the shadow root), Apple platforms append it to the anchor's accessibility value, Compose merges it into the anchor's semantics as a state description, Flutter adds it to the anchor's semantics value, React Native to its accessibility value.

इससे जनरेट किया गया: specs/badge.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• दिखने वाला बिंदु और संख्या सहायक तकनीक से छिपे रहते हैं, इसलिए गिनती कभी दो बार नहीं पढ़ी जाती।
• लेबल (या, उसके बिना, दिखाई गई गिनती, जैसे “999+”) ऐंकर का हिस्सा बन जाता है, इसलिए ऐंकर एक ही बार दोनों के साथ पढ़कर सुनाया जाता है: “इनबॉक्स, बटन, 3 अपठित”। हर प्लैटफ़ॉर्म अपना तरीक़ा इस्तेमाल करता है: वेब पर ऐंकर पर aria-description, Apple के प्लैटफ़ॉर्म, Flutter और React Native पर एक्सेसिबिलिटी वैल्यू, और Compose पर स्टेट डिस्क्रिप्शन।
• 0 की गिनती कुछ नहीं जोड़ती: ऐंकर वैसे ही पढ़कर सुनाया जाता है जैसे बैज के बिना सुनाया जाता।
• बिना ऐंकर का बैज न कुछ बनाता है, न जगह लेता है, न कुछ कहता है, और डीबग बिल्ड इसकी रिपोर्ट करता है। बाद में ऐंकर मिलने पर वह तुरंत उस पर बन जाता है।
• गिनती या लेबल बदलने पर ऐंकर जो कहता है वह अपडेट हो जाता है, बिना ऐसी घोषणा के जो व्यक्ति को बीच में टोके।
• यह न इनपुट लेता है, न जगह, इसलिए ऐंकर का हिट एरिया पूरा बना रहता है।
• बिना लेबल का बिंदु, ऋणात्मक गिनती और 1 से कम का max डीबग बिल्ड में रिपोर्ट किए जाते हैं।

आपको क्या करना है

link

• ऐसा लेबल लिखें जो ऐंकर के नाम को दोहराने के बजाय उसे पूरा करे: “3 अपठित”, न कि “इनबॉक्स में 3 अपठित संदेश हैं”।
• ऐंकर को अपने नाम वाला एक ही एलिमेंट बनाएँ, जैसे लेबल वाला आइकन बटन। Compose पर, जो सादा आइकन किसी ऐसे एलिमेंट के भीतर नहीं है जो अपने वंशजों को मर्ज करता है, उसके चारों ओर ऐसा एक एलिमेंट चाहिए, ताकि नाम और लेबल साथ पढ़े जाएँ।
• अगर किसी बदलाव को होते ही पढ़कर सुनाना ज़रूरी हो, जैसे लाइव चैट में, तो उसे अपने प्रॉडक्ट से लाइव रीजन के ज़रिए सुनाएँ। बैज ख़ुद कुछ पढ़कर नहीं सुनाता।