الوسم

نظرة عامة

link

Web

tanrei-tag

schedule

SwiftUI

TanreiTag

radio_button_unchecked

Jetpack Compose

TanreiTag

radio_button_unchecked

Flutter

TanreiTag

radio_button_unchecked

React Native

Tag

radio_button_unchecked

مولَّد من docs/status/status.json, specs/tag.spec.json

ثلاثة مظاهر، بحالة ومن دونها

الوسم كلمة أو عبارة قصيرة تقول ما هو الشيء أو ما حالته: فئة مقال، نتيجة بنية، مرحلة إصدار، القيمة الافتراضية بين عدة قيم. يقف داخل التخطيط، ضمن السطر مع النص المجاور له، ولا يستجيب أبدًا لمؤشر ولا لمفتاح ولا لتركيز.

على الويب هو <tanrei-tag>. أما المنصات الأخرى فلم تنفّذه بعد.

الاستخدام

link

<tanrei-tag label="تجريبي"></tanrei-tag>
<tanrei-tag variant="outlined" label="تصميم"><span slot="icon">sell</span></tanrei-tag>

<!-- التسمية تقول الحالة. -->
<tanrei-tag status="error" label="فاشل"></tanrei-tag>

<!-- التسمية لا تقولها: تُقرأ status-label قبلها («خطأ، 3 بنيات») ولا تُرسم. -->
<tanrei-tag status="error" status-label="خطأ" label="3 بنيات"></tanrei-tag>

<script type="module">
  import '@tanrei/web/components/tag';
</script>

import { Tag } from '@tanrei/react';

<Tag label="تجريبي" />
<Tag variant="outlined" label="تصميم"><span slot="icon">sell</span></Tag>
<Tag status="error" statusLabel="خطأ" label={`${failed} بنيات`} />

المواصفات

link

كل مظهر في كل حالة

حجمان، وأيقونة، ونقطة

sellsell

البنية

البنية

مرسوم فوق نموذج الاختبار tonal كما ترسمه حزمة الويب.

الجزء	الوصف
1 container	The shape that holds the label: at least the height of its size, a pill in the default system, filled in the tonal and filled looks and edged in the outlined look. It carries no state: nothing about it answers a pointer, a press or focus.
2 label	The word or short phrase the tag shows, on one line.
3 icon · اختياري	A leading glyph of the system's icon set that the product names (a category's mark, a status's mark). Decorative: the label says what the tag means.
4 dot · اختياري	A small filled circle in the leading position, in the look's mark color: the lightest way to show a status beside its word. Drawn where the product asks for it and no glyph is given, and always on an outlined tag that has a status.
5 outline · اختياري	The outlined look's edge: one hairline inside the container, the same in every status.

القياسات

القياسات

الطول	الرمز	القيمة (px)
container padding-inline	tanrei.comp.tag.container.padding-inline.medium	8
container height	tanrei.comp.tag.container.height.medium	24

مرسوم فوق نموذج الاختبار tonal كما ترسمه حزمة الويب.

الخصائص

الخاصية	النوع	القيمة الافتراضية	الوصف
label	string	""	The tag's text: a word or a short phrase ("Beta", "Out of stock"). It is what the tag draws and what assistive technology reads.
variant	tonal | outlined | filled	"tonal"	How much the tag weighs. tonal: a quiet fill, the default. outlined: no fill and one hairline, for many tags close together. filled: a full fill, for the chosen one among its neighbours (the default among values, the required among fields) and for the one status that must not be missed.
status	default | info | warning | error | success	"default"	What the tag reports, in the names the snackbar uses. default: a category or a neutral state, in the look's own colors. info, warning, error and success draw the look in that status's color roles. It changes colors only; the words are the label's and statusLabel's.
statusLabel	string	""	The status in words, in the product's language ("Error"), read by assistive technology before the label and not drawn. For a tag whose label does not itself say the status (an error tag that reads "3 builds"); a label that says it ("Failed") needs none. Ignored while status is default.
size	small | medium	"medium"	Small (20 high, 12 text) follows a field's label, a table cell or a line of body text without making the line taller; medium (24 high, 14 text) stands beside a heading or by itself.
dot	boolean	false	Draws the dot before the label, in the look's mark color. A glyph in the icon slot takes its place. An outlined tag with a status draws the dot whatever this says, because nothing else in that look shows the status.
disabled	boolean	false	Draws the tag as part of something disabled — the label of a disabled field, a disabled row of a list, a disabled item of a menu — in its look's disabled colors, so that it fades with what it stands in. It changes nothing else: a tag takes no input and no focus, and what assistive technology hears of the disabled state it hears from the element the tag stands in. The component that holds the tag sets it (a Field does, for its requirement tag); a product sets it on a tag it places in a disabled element of its own.

المنافذ

المنفذ	الوصف
icon	The leading glyph: a glyph of the system's icon set, drawn through the platform's icon helper at the tag's glyph size.

الحالات

السلوك

متطلبات بصيغة EARS. يُختبر تنفيذ كل منصة مقابل هذه المعرّفات. يُعرض نص المتطلبات كما ورد في ملف المواصفة، بالإنجليزية.

المعرّف	المتطلب
TAG-1	THE tag SHALL draw a container at least the height of its size (comp.tag.container.height.medium for medium, and so on) with corners comp.tag.container.shape, never larger than half the container's height (a pill where the value is sys.shape.corner.full, at any height the tag grows to) and eased by sys.shape.corner-smoothing, and lay out in one row its glyph or its dot, where it has one, and its label, comp.tag.container.gap apart; the start SHALL be padded by comp.tag.container.padding-inline-with-icon.medium where it holds the glyph or the dot and by comp.tag.container.padding-inline.medium where the label meets it, the end by comp.tag.container.padding-inline.medium, and the row's tallest item (the label's line or the glyph's box) SHALL be padded at the top and bottom by at least comp.tag.container.padding-block.medium (and so on for each size). THE tag SHALL be as wide as its content and its paddings, never wider than its layout gives it, and SHALL draw no elevation.
TAG-2	WHILE status is default THE tag SHALL fill its container with the container color of its variant and draw its label, and its glyph or dot, in that variant's label and icon colors: comp.tag.tonal.container.color, comp.tag.tonal.label.color and comp.tag.tonal.icon.color for tonal, and outlined's and filled's tokens of the same names (comp.tag.outlined.container.color, comp.tag.filled.container.color, and so on).
TAG-3	WHILE status is info, warning, error or success THE tag SHALL draw its container, its label and its glyph or dot from the parts of its variant prefixed with the status: for a tonal info tag comp.tag.tonal.info.container.color, comp.tag.tonal.info.label.color and comp.tag.tonal.info.icon.color; for outlined and filled, and for warning, error and success, their own tokens of the same names (comp.tag.outlined.error.icon.color, comp.tag.filled.success.container.color, and so on). A status SHALL change these colors only: the tag's size, shape, layout and edge stay those of its variant and size, and the tag SHALL NOT draw a glyph the product did not give.
TAG-4	WHILE variant is outlined THE tag SHALL draw an edge comp.tag.outline.width wide in comp.tag.outline.color inside its container's size, following its corners, in every status, without changing the tag's size or the place of its content; WHILE variant is tonal or filled it SHALL draw no edge. A status SHALL NOT color the edge: it is the system's one hairline.
TAG-5	THE tag SHALL set its label on one line in the text style of its size (comp.tag.label.typescale.medium for medium, and so on) and the label color of its look (TAG-2, TAG-3), SHALL NOT wrap it, and SHALL cut it with an ellipsis only when the layout gives the tag less width than the label needs, keeping its paddings and its glyph or dot whole; the full label SHALL remain what assistive technology reads.
TAG-6	WHERE the icon slot holds a glyph THE tag SHALL draw it before the label in a box of comp.tag.icon.size, centred on the label's line, in the icon color of its look (TAG-2, TAG-3), with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, SHALL keep it from assistive technology, and SHALL draw no mark of its own in its place.
TAG-7	WHILE dot is true and the icon slot is empty THE tag SHALL draw before the label a filled circle of diameter comp.tag.dot.size in the icon color of its look (TAG-2, TAG-3), centred on the label's line, a circle whatever corners the container has, and SHALL keep it from assistive technology; WHERE the icon slot holds a glyph THE tag SHALL draw the glyph and no dot.
TAG-8	WHILE variant is outlined and status is info, warning, error or success and the icon slot is empty THE tag SHALL draw the dot of TAG-7 whether dot is true or false, because an outlined tag keeps the surface's label color and the one hairline in every status, so its mark is the only place the status shows.
TAG-9	THE tag SHALL NOT take pointer, touch or keyboard input, SHALL NOT take focus or be a stop in the focus order, and SHALL NOT change anything it draws under a pointer, a press or focus: it has no hovered, focused, pressed or selected state and no disabled state of its own — disabled draws it as part of something disabled and changes nothing it does (TAG-21) — draws no state layer, no ripple and no focus indicator, and emits no event.
TAG-10	WHERE the tag is placed inside an element that takes input (a link, a button, a list item, a table row, a card that is pressed as a whole) THE tag SHALL let input over it reach that element, SHALL stay as it is drawn while that element is hovered, focused or pressed (the state is drawn by that element, on its own container), and SHALL add its text (TAG-11) to that element's content in reading order; it SHALL NOT become a second target inside it.
TAG-11	THE tag SHALL expose its label as plain text, read where the tag sits, with no role, name or state of its own; WHILE status is not default and statusLabel is not empty THE tag SHALL expose statusLabel before the label as part of that text, set apart so that the two are read as two phrases ("Error, 3 builds"), and SHALL NOT draw it; WHILE status is default THE tag SHALL ignore statusLabel. THE tag SHALL NOT expose its variant, its size or its status in any other way: a status is given in words or not at all.
TAG-12	WHEN label, status or statusLabel changes THE tag SHALL draw and expose the new value at once, without a motion, and SHALL NOT announce the change by itself.
TAG-13	THE tag SHALL lay itself out inline with the text or the row it is placed in, as one unbreakable box, with the baseline of its label on the baseline of the text beside it; WHILE the text size is enlarged THE tag SHALL grow its container with its label, keeping the height of its size as a minimum, its paddings, and its glyph box and its dot at comp.tag.icon.size and comp.tag.dot.size.
TAG-14	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE tag SHALL draw an edge comp.tag.outline.width wide in the platform's text color inside its container in every variant, and its label, glyph and dot in that text color, so that a look whose fill the mode removes is still a bounded label; the status SHALL then rest on the label's words and statusLabel alone.
TAG-15	WHERE the layout direction is right-to-left THE tag SHALL mirror the order of its content and apply its paddings by logical start and end, so that the glyph or the dot sits at the right of the label.
TAG-16	THE tag 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 tag is shown THE tag SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows.
TAG-17	WHERE the layout direction is right-to-left THE tag SHALL draw the glyph of its icon slot mirrored left to right exactly when the system's icon set marks that glyph's name as mirrored or the product forces mirroring for that use, and unmirrored when the product forbids it: the icon helper mirrors the glyph inside its own box, about the box's vertical centre line, changing neither its place, size, color and fill nor the order TAG-15 gives. THE tag SHALL NOT mirror a glyph itself, and SHALL NOT mirror content the product gives as an image or a view of its own rather than by a glyph's name. The dot is never mirrored.
TAG-18	THE tag SHALL lay out its label as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a version and a date keep their own order in a right-to-left layout and reorder nothing beside them; THE tag SHALL still place the label by the layout direction, not by the text's own, and SHALL cut a label that does not fit (TAG-5) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning.
TAG-19	WHEN variant or size names a value that the active design system does not have, or status names a value this spec does not have, THE tag SHALL render with the default value (the default variant's or size's tokens, status default), and in debug builds report the unknown value.
TAG-20	IF label is empty THE tag SHALL draw nothing, take no space and expose nothing, and in debug builds report that a tag has no text: a glyph or a dot alone is not a tag. IF statusLabel is not empty while status is default THE tag SHALL ignore it and in debug builds report it.
TAG-21	WHILE disabled is true — the tag stands inside something disabled, and the component that holds it, or the product, says so — THE tag SHALL draw its fill, its label, its glyph and its dot from its look's disabled tokens (comp.tag.<variant>.disabled.container.color, comp.tag.<variant>.disabled.label.color and comp.tag.<variant>.disabled.icon.color, and their parts of each status), whatever its status, so that it fades with what it stands in and does not read as the one live part of a disabled whole; an outlined tag SHALL keep its edge and draw no fill. disabled SHALL change nothing else: the tag SHALL keep its size, its label and its place, take no input and no focus (TAG-9), and keep its text readable by assistive technology, which hears the disabled state from the element the tag stands in, never from the tag. WHERE the platform draws with a person's own forced colors THE tag SHALL draw its edge, its label, its glyph and its dot in the platform's color for disabled text (GrayText on the web) in place of its text color (TAG-14).

مطابقة الأسماء بين المنصات

التكافؤ لا يعني واجهات برمجية متطابقة. تعبّر كل منصة عن العقد نفسه بأسلوبها.

المواصفة	Web	SwiftUI	Jetpack Compose	Flutter	React Native
المكوّن	tanrei-tag	TanreiTag	TanreiTag	TanreiTag	Tag
label · الخاصية	label	title	label	label	label
variant · الخاصية	variant	variant	variant	variant	variant
status · الخاصية	status	status	status	status	status
statusLabel · الخاصية	statusLabel	statusLabel	statusDescription	statusSemanticLabel	statusAccessibilityLabel
size · الخاصية	size	size	size	size	size
dot · الخاصية	dot	showsDot	showDot	showDot	dot
disabled · الخاصية	disabled	isDisabled	enabled	enabled	disabled
ملاحظات	<tanrei-tag> with the label as the label attribute and the glyph in the icon slot. The host is display: inline-flex with vertical-align: baseline and no role, no tabindex and no listeners; pointer-events stay as they are, so a press over a tag inside a link or a button reaches that element (TAG-10). statusLabel is reflected as the status-label attribute and drawn as visually hidden text before the label in the shadow root, followed by a comma and a space (TAG-11); the glyph and the dot are aria-hidden. The label is one dir="auto" run with text-overflow: ellipsis (TAG-18). Under forced-colors: active the container takes a CanvasText border of the outline width (TAG-14). disabled is a reflected boolean attribute that draws the look's disabled tokens and nothing else: no aria-disabled, no inert, no listener (TAG-21); under forced-colors: active the edge and the text are GrayText.	TanreiTag(_ title: String, variant:, status:, statusLabel:, size:, showsDot:, icon:), the glyph given by name through icon:. Not a Button and not focusable; allowsHitTesting(false) so a press reaches a row or a link that holds it. The view is one accessibility element whose label is statusLabel and the title joined by a comma, with the static text trait. isDisabled: (a parameter, not .disabled(_:), which would say the tag is a control): it draws the look's disabled tokens and changes nothing else (TAG-21).	TanreiTag(label, variant, status, statusDescription, size, showDot, icon), the glyph given by name through icon. No clickable and no focusable modifier. The label's text semantics are replaced by statusDescription and the label joined by a comma where a status label is given; the glyph and the dot are cleared from semantics. enabled is the inverse flag: it draws the look's disabled tokens and changes nothing else (TAG-21).	TanreiTag(label: …, variant:, status:, statusSemanticLabel:, size:, showDot:, icon:), the glyph given by name through icon. Wrapped in IgnorePointer, with no Focus. One Semantics(label:) over the drawn parts, which are excluded. enabled is the inverse flag: it draws the look's disabled tokens and changes nothing else (TAG-21).	<Tag label="Beta" />; the glyph is the icon prop (a glyph name). pointerEvents="none" and not focusable. One accessible element with accessibilityRole="text" whose accessibilityLabel is the status label and the label joined by a comma. Follows the app's direction where an ancestor's is not known. disabled: it draws the look's disabled tokens and changes nothing else (TAG-21).

الرموز

الرمز	يشير إلى	القيمة المحلولة (فاتح)
--tanrei-comp-tag-container-gap	sys.space.space50	4px
--tanrei-comp-tag-container-height-medium	—	24px
--tanrei-comp-tag-container-height-small	—	20px
--tanrei-comp-tag-container-padding-block-medium	—	2px
--tanrei-comp-tag-container-padding-block-small	—	2px
--tanrei-comp-tag-container-padding-inline-with-icon-medium	sys.space.space75	6px
--tanrei-comp-tag-container-padding-inline-with-icon-small	sys.space.space50	4px
--tanrei-comp-tag-container-padding-inline-medium	sys.space.space100	8px
--tanrei-comp-tag-container-padding-inline-small	sys.space.space75	6px
--tanrei-comp-tag-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-tag-dot-size	sys.space.space100	8px
--tanrei-comp-tag-filled-container-color	sys.color.primary	#1b1b1b
--tanrei-comp-tag-filled-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-filled-disabled-error-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-filled-disabled-error-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-error-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-info-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-filled-disabled-info-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-info-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-success-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-filled-disabled-success-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-success-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-warning-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-filled-disabled-warning-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-disabled-warning-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-filled-error-container-color	sys.color.error	#cd262f
--tanrei-comp-tag-filled-error-icon-color	comp.tag.filled.error.label.color	#ffffff
--tanrei-comp-tag-filled-error-label-color	sys.color.on-error	#ffffff
--tanrei-comp-tag-filled-icon-color	comp.tag.filled.label.color	#ffffff
--tanrei-comp-tag-filled-info-container-color	sys.color.info	#3066cb
--tanrei-comp-tag-filled-info-icon-color	comp.tag.filled.info.label.color	#ffffff
--tanrei-comp-tag-filled-info-label-color	sys.color.on-info	#ffffff
--tanrei-comp-tag-filled-label-color	sys.color.on-primary	#ffffff
--tanrei-comp-tag-filled-success-container-color	sys.color.success	#077b32
--tanrei-comp-tag-filled-success-icon-color	comp.tag.filled.success.label.color	#ffffff
--tanrei-comp-tag-filled-success-label-color	sys.color.on-success	#ffffff
--tanrei-comp-tag-filled-warning-container-color	sys.color.warning	#9b5c00
--tanrei-comp-tag-filled-warning-icon-color	comp.tag.filled.warning.label.color	#ffffff
--tanrei-comp-tag-filled-warning-label-color	sys.color.on-warning	#ffffff
--tanrei-comp-tag-icon-size	sys.icon.extra-small	16px
--tanrei-comp-tag-outline-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-tag-outline-width	sys.border.hairline	1px
--tanrei-comp-tag-outlined-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-error-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-error-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-error-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-info-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-info-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-info-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-success-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-success-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-success-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-warning-container-color	—	#000000 · 0%
--tanrei-comp-tag-outlined-disabled-warning-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-disabled-warning-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-outlined-error-container-color	comp.tag.outlined.container.color	#000000 · 0%
--tanrei-comp-tag-outlined-error-icon-color	sys.color.error	#cd262f
--tanrei-comp-tag-outlined-error-label-color	comp.tag.outlined.label.color	#1b1b1b
--tanrei-comp-tag-outlined-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-tag-outlined-info-container-color	comp.tag.outlined.container.color	#000000 · 0%
--tanrei-comp-tag-outlined-info-icon-color	sys.color.info	#3066cb
--tanrei-comp-tag-outlined-info-label-color	comp.tag.outlined.label.color	#1b1b1b
--tanrei-comp-tag-outlined-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-tag-outlined-success-container-color	comp.tag.outlined.container.color	#000000 · 0%
--tanrei-comp-tag-outlined-success-icon-color	sys.color.success	#077b32
--tanrei-comp-tag-outlined-success-label-color	comp.tag.outlined.label.color	#1b1b1b
--tanrei-comp-tag-outlined-warning-container-color	comp.tag.outlined.container.color	#000000 · 0%
--tanrei-comp-tag-outlined-warning-icon-color	sys.color.warning	#9b5c00
--tanrei-comp-tag-outlined-warning-label-color	comp.tag.outlined.label.color	#1b1b1b
--tanrei-comp-tag-tonal-container-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-tag-tonal-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-tonal-disabled-error-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-tonal-disabled-error-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-error-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-info-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-tonal-disabled-info-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-info-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-success-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-tonal-disabled-success-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-success-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-warning-container-color	—	#1b1b1b · 12%
--tanrei-comp-tag-tonal-disabled-warning-icon-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-disabled-warning-label-color	—	#1b1b1b · 38%
--tanrei-comp-tag-tonal-error-container-color	sys.color.error-container	#ffedeb
--tanrei-comp-tag-tonal-error-icon-color	sys.color.error	#cd262f
--tanrei-comp-tag-tonal-error-label-color	sys.color.on-error-container	#3a211f
--tanrei-comp-tag-tonal-icon-color	comp.tag.tonal.label.color	#262626
--tanrei-comp-tag-tonal-info-container-color	sys.color.info-container	#edf0ff
--tanrei-comp-tag-tonal-info-icon-color	sys.color.info	#3066cb
--tanrei-comp-tag-tonal-info-label-color	sys.color.on-info-container	#212839
--tanrei-comp-tag-tonal-label-color	sys.color.on-secondary-container	#262626
--tanrei-comp-tag-tonal-success-container-color	sys.color.success-container	#e2f6df
--tanrei-comp-tag-tonal-success-icon-color	sys.color.success	#077b32
--tanrei-comp-tag-tonal-success-label-color	sys.color.on-success-container	#1b2c1c
--tanrei-comp-tag-tonal-warning-container-color	sys.color.warning-container	#ffeee0
--tanrei-comp-tag-tonal-warning-icon-color	sys.color.warning	#9b5c00
--tanrei-comp-tag-tonal-warning-label-color	sys.color.on-warning-container	#362410
--tanrei-comp-tag-label-typescale-medium	sys.typescale.label	500 14px/1.4286
--tanrei-comp-tag-label-typescale-small	sys.typescale.label-small	500 12px/1.3333

نماذج الاختبار

عروض مرجعية. تلتقط كل المنصات لقطة لكل نموذج بالمعرّف نفسه حتى يمكن مقارنة النتائج.

variant: tonal (22)

tonal

label: Draft

tonal-info

label: In review variant: tonal status: info

tonal-warning

label: Expiring variant: tonal status: warning

tonal-error

label: Failed variant: tonal status: error

tonal-success

label: Passed variant: tonal status: success

small-tonal

label: Optional size: small

small-tonal-disabled

label: Optional size: small disabled: true

tonal-error-disabled

label: Failed status: error disabled: true

small-tonal-error

label: Failed status: error size: small

icon

label: Design slots: icon

icon-success

label: Passed status: success slots: icon

icon-small

label: Design size: small slots: icon

dot

label: Archived dot: true

dot-success

label: Online status: success dot: true

status-label

label: 3 builds status: error statusLabel: Error

long-label

label: Awaiting a second review from the access… status: info dot: true

long-label-rtl

label: Awaiting a second review from the access… status: info dot: true direction: rtl

icon-rtl

label: التالي direction: rtl slots: icon

docs-status-alpha

label: Alpha size: small slots: icon

docs-status-beta

label: Beta size: small slots: icon

docs-status-stable

label: Stable status: success size: small slots: icon

docs-status-deprecated

label: Deprecated status: error size: small slots: icon

variant: outlined (13)

outlined

label: Draft variant: outlined

outlined-info

label: In review variant: outlined status: info

outlined-warning

label: Expiring variant: outlined status: warning

outlined-error

label: Failed variant: outlined status: error

outlined-success

label: Passed variant: outlined status: success

small-outlined

label: Optional variant: outlined size: small

outlined-disabled

label: Archived variant: outlined disabled: true

icon-outlined

label: Design variant: outlined slots: icon

icon-outlined-error

label: Failed variant: outlined status: error slots: icon

dot-small-outlined-warning

label: Degraded variant: outlined status: warning size: small

ltr-label-rtl

label: v2.1 beta variant: outlined status: success direction: rtl

docs-status-planned

label: Planned variant: outlined size: small slots: icon

docs-status-lagging

label: Lagging variant: outlined status: warning size: small slots: icon

variant: filled (8)

filled

label: Default variant: filled

filled-info

label: In review variant: filled status: info

filled-warning

label: Expiring variant: filled status: warning

filled-error

label: Failed variant: filled status: error

filled-success

label: Passed variant: filled status: success

small-filled

label: Required variant: filled size: small

small-filled-disabled

label: Required variant: filled size: small disabled: true

icon-filled

label: Default variant: filled slots: icon

مولَّد من specs/tag.spec.json, tokens/comp/tag.tokens.json, design/tokens/

الإرشادات

link

شارة أم رقاقة أم وسم

link

يُفرَّق بين الثلاثة مرة واحدة، بما يفعله كل منها:

المكوّن	ما هو	أين يقف	هل يستقبل إدخالًا
الشارة	نقطة أو عدد ملحق بعنصر آخر.	على زاوية عنصر الارتكاز، خارج التخطيط.	لا. الإدخال يصل إلى عنصر الارتكاز.
الرقاقة	عنصر تحكم.	داخل التخطيط.	نعم: تُضغط أو تُبدَّل أو تُزال، ولها تركيز وحالات.
الوسم	تسمية ثابتة.	داخل التخطيط، ضمن السطر.	أبدًا.

1. إن كان يُضغط أو يُحدَّد أو يُزال فهو رقاقة. وإن كان يقود إلى مكان ما فهو رابط.
2. إن كان رقمًا أو نقطة فوق شيء آخر فهو شارة.
3. إن كان كلمة لا تقول إلا ما هو الشيء أو ما حالته فهو وسم.

لا يصير الوسم عنصر تحكم بإضافة معالج أحداث إليه. داخل رابط أو زر أو عنصر قائمة أو صف يُضغط كله، يبقى الوسم نصًّا من ذلك العنصر: الإدخال فوقه يصل إلى العنصر، والعنصر يرسم تحويمه وتركيزه وضغطه بنفسه.

اختيار المظهر

link

variant	ما يرسمه	يُستخدم لـ
tonal (الافتراضي)	تعبئة هادئة.	معظم الوسوم.
outlined	بلا تعبئة، وخط رفيع واحد.	وسوم كثيرة متقاربة: عمود في جدول، قائمة فئات.
filled	تعبئة كاملة.	الوسم المختار بين جيرانه: القيمة الافتراضية بين القيم، الحقل المطلوب بين الحقول. وكذلك الحالة الوحيدة التي يجب ألا تفوت أحدًا.

الحالات

link

الخاصية status تأخذ إحدى القيم default أو info أو warning أو error أو success. وهي لا تغيّر إلا الألوان. الوسم من الطراز outlined يحتفظ بلون نص السطح وبخطه الرفيع في كل حالة، ولذلك يرسم دائمًا نقطة (أو أيقونتك) بلون الحالة: تلك العلامة هي الموضع الوحيد الذي تظهر فيه الحالة.

لا يرسم الوسم أيقونة حالة من تلقاء نفسه. سمِّ واحدة حيث تفيد، كما يفعل هذا الموقع للحالات الست في جداول الحالة الخاصة به:

الحالات الست في هذا الموقع

radio_button_uncheckedscheduleclock_loader_40clock_loader_80check_circleblock

الأحجام

link

size	الارتفاع	النص	يُستخدم لـ
small	20	12	بجانب تسمية حقل، في خلية جدول، في سطر من نص المتن. لا يزيد ارتفاع السطر.
medium (الافتراضي)	24	14	بجانب عنوان، أو وحده.

وسم المطلوب ووسم الاختياري في الحقل وفي مجموعة الحقول هما هذا المكوّن بحجمه الصغير: الطراز filled للمطلوب، والطراز tonal للاختياري. وهما يقرآن رموز التصميم الخاصة بالوسم وليست لهما رموز خاصة بهما، فنظام التصميم الذي يعيد تنسيق وسومه الصغيرة يعيد تنسيقهما معها.

داخل شيء معطَّل

link

ليست للوسم حالات خاصة به، لكنه قد يقف داخل شيء معطَّل: تسمية حقل معطَّل، أو صف معطَّل في قائمة، أو عنصر معطَّل في قائمة أوامر. والخاصية disabled ترسمه بألوان مظهره المعطَّلة (comp.tag.<variant>.disabled.*)، أيًّا كانت حالته، فيبهت مع ما يحتويه ولا يبدو الجزء الحيّ الوحيد فيه. ولا تغيّر شيئًا آخر: يحتفظ الوسم بحجمه وكلماته، ولا يستقبل إدخالًا ولا تركيزًا. والحقل ومجموعة الحقول يعيّنانها على وسم المطلوب أو الاختياري ما داما معطَّلين؛ وعيِّنها بنفسك على وسم تضعه في عنصر معطَّل من عناصرك.

وسوم في الراحة وداخل شيء معطَّل

افعل

link

• قل الحالة بالكلمات. «فاشل» لا تحتاج إلى شيء آخر؛ أما الوسم الذي يقول «3 بنيات» بألوان الخطأ فيحتاج إلى statusLabel.
• أعطِ الوسم حيّزًا يكفي تسميته. التسمية التي لا تتسع تُقتطع بعلامة الحذف (…)، وليس للوسم تحويم ولا تركيز يُظهر الباقي.
• ضع مجموعة الوسوم في قائمة (<ul> و <li> على الويب) وسمِّ القائمة، حيث تكون الوسوم مجموعة واحدة، كفئات مقال.

لا تفعل

link

• لا تجعل الوسم قابلًا للضغط. التسمية التي تُضغط أو تُبدَّل أو تُزال رقاقة؛ والتي تقود إلى مكان ما رابط.
• لا تستخدم وسمًا بلا تسمية. النقطة وحدها أو الأيقونة وحدها ليست وسمًا، ولا يُرسم لها شيء.
• لا تعتمد على اللون ليحمل الحالة. في وضع الألوان المفروضة (forced colors) تتشابه الوسوم كلها: حافة وتسمية بلون النص.
• لا تستخدم الوسم لعدد على أيقونة. تلك شارة.

إمكانية الوصول

link

الدور

none

التسمية

The tag has no role and no name of its own: it is text, read where it sits. What is read is label, preceded by statusLabel where the tag has a status and the product gave one ("Error, 3 builds"). The glyph and the dot are decorative and hidden. Inside a link, a button, a list item or a table cell the tag's text is part of that element's content.

الحد الأدنى للهدف

تستوفي مساحة اللمس الحد الأدنى لحجم الهدف حتى لو كان الحجم المرئي أصغر. minimum 32px · pointer 44px · spacing 8px · touch 48px

لوحة المفاتيح

المفاتيح	الإجراء

ملاحظات

• Not interactive: the tag takes no input and no focus (TAG-9), so there is no target to size. minimumTarget holds trivially. A label that must be pressed, selected or removed is a chip; one that leads somewhere is a link.
• A status never rests on color alone (WCAG 1.4.1): the label says it ("Failed", "Stable"), or statusLabel adds it in words. The component cannot tell whether a label says its status, so this is the product's to check; the docs page says so with examples.
• Several tags in a row are the product's to group: where they are a set (an article's categories), the product lays them out in its platform's list semantics (ul and li on the web) and names the list. The tag does not group itself and has no list role.
• A tag does not announce a change of its text or status (TAG-12). Where a change must be announced (a build that finishes while the person watches), the product puts the tag in a live region or reports the change with a snackbar.
• A label cut by TAG-5 is still read in full by assistive technology, but a person who sees the ellipsis has no way to read the rest from the tag itself: it takes no hover and no focus. Give a tag room for its label, or let the element that holds it (a table cell, a list item) show the full text.
• Contrast in the default system: every label is a role drawn on its paired role (on-secondary-container on secondary-container, on-error-container on error-container, on-primary on primary, on-error on error, on-surface on a surface), each held to 4.5:1 by the token invariants. The status color used for a glyph or a dot keeps 3:1 against its status container and against every surface (it is held to 4.5:1 as text on surfaces). The outlined look's edge is decorative.
• Forced colors (TAG-14): a filled or tonal tag loses its fill, so every look gains an edge in the text color. Statuses then look alike, which is why the status must be in words.

مولَّد من specs/tag.spec.json, tokens/sys/measure.tokens.json

ما يتكفل به المكوّن

link

• ليس له دور ولا اسم: تُقرأ تسميته حيث يقف الوسم، نصًّا. داخل رابط أو زر أو خلية جدول هو جزء من محتوى ذلك العنصر.
• تُقرأ قيمة statusLabel قبل التسمية عبارةً ثانية («خطأ، 3 بنيات») ولا تُرسم أبدًا. وتُتجاهل ما دامت قيمة status هي default.
• الأيقونة والنقطة مخفيتان عن التقنيات المساعدة.
• لا يستقبل إدخالًا ولا تركيزًا، فلا يضيف موضع توقف إلى ترتيب التركيز ولا هدفًا إلى صف.
• التسمية المقتطعة تُقرأ كاملة مع ذلك.
• في وضع الألوان المفروضة يكتسب كل مظهر حافة بلون النص، وتأخذ التسمية والأيقونة والنقطة ذلك اللون؛ والوسم المعطَّل يأخذ لون النص المعطَّل.
• الخاصية disabled لا تعرض شيئًا للتقنيات المساعدة: العنصر الذي يقف فيه الوسم هو الذي يقول إنه معطَّل.
• في التخطيط من اليمين إلى اليسار تنتقل الأيقونة أو النقطة إلى يمين التسمية، وتُعكس الأيقونة التي تعلّمها مجموعة الأيقونات، وتحتفظ التسمية المكتوبة من اليسار إلى اليمين بترتيبها الخاص وتُقتطع عند نهايتها هي.
• الطراز أو الحجم أو الحالة غير المعروفة، والتسمية الفارغة، وقيمة statusLabel بلا حالة يُبلَّغ عنها في بنيات التنقيح (debug).

ما عليك فعله

link

• تحقق من أن كلمات كل وسم تقول حالته. المكوّن لا يستطيع أن يعرف هل «3 بنيات» خبر سار أم سيئ.
• اكتب قيمة statusLabel بلغة الصفحة.
• لا تعيّن disabled إلا على وسم يقف داخل شيء معطَّل، وتأكد أن ذلك العنصر يقول ذلك (عنصر تحكم معطَّل، أو aria-disabled): فالوسم الباهت يعتمد عليه.
• إن وجب إعلان التغيّر لحظة حدوثه (بنية تنتهي والشخص يراقب)، فضع الوسم في منطقة حيّة (live region) أو أبلغ عن التغيّر بشريط إشعار. الوسم لا يُعلِن.