Tag
تسميات للفئات والمرشحات والحالات. Tag وStatus Tag، مملوءان أو بحد فقط، وثلاثة أحجام، وقابلان للإزالة اختياريًا.
الإصدار 0.2.0 ·
التثبيت
bunx --bun shadcn@latest add @dga/tagالاستخدام
import { StatusTag, Tag } from "@/components/ui/tag";
<Tag variant="info">تقنية</Tag>
<StatusTag variant="success">مكتمل</StatusTag>تصنّف Tag المحتوى حسب الفئة أو تعرض المرشحات التي اختارها المستخدم. وتعرض Status Tag حالة عنصر أو مهمة أو طلب.
البنية
- Tag: عنصر
<span>مع أيقونة وزر إغلاق اختياريين. - StatusTag: عنصر
<span>فيه نقطة ملونة والتسمية. - Close button (اختياري): عنصر
<button>حقيقي بمساحة نقر 24px.
أمثلة
القابل للإزالة
مرّر onDismiss لإضافة زر إغلاق. وأعطه اسمًا محددًا عبر dismissLabel، مثل «إزالة الرياض»، وانقل التركيز إلى موضع مناسب بعد إزالة الوسم.
Status Tag
يقع subtle (الافتراضي) على تظليل خفيف، وinverted على تعبئة مصمتة، وghost بلا تعبئة. وتبدأ الثلاثة بنقطة ملونة.
اتجاه RTL
تقع النقطة والأيقونة وزر الإغلاق على جهتي البداية والنهاية المنطقيتين.
إمكانية الوصول
| المفتاح | الإجراء |
|---|---|
| Tab | ينقل التركيز إلى زر الإغلاق في الوسم القابل للإزالة. |
| Enter أو Space | يزيل الوسم. |
- الوسوم عناصر
<span>وتُقرأ كنص. ضع المعنى في التسمية؛ أما اللون والنقطة فإضافة (WCAG 1.4.1). - لزر الإغلاق اسمه الخاص ومساحة نقر 24px (WCAG 2.5.8).
- استخدم Button مع
aria-pressedللوسوم التي يبدّلها المستخدم.
مرجع API
StatusTag
حالة عنصر أو مهمة أو طلب، مع نقطة ملونة.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"neutral" | "success" | "error" | "warning" | "info"عائلة اللون. `on-color` للوسوم على خلفيات لون العلامة. | "neutral" | |
| ||
"xs" | "sm" | "md"الارتفاع: `xs` 20px، و`sm` 24px، و`md` 32px. | "sm" | |
| ||
"subtle" | "inverted" | "ghost"`subtle` تعبئة مظلّلة، و`inverted` تعبئة مصمتة، و`ghost` بلا تعبئة. | "subtle" | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
Tag
وسم لتصنيف أو لمرشّح محدَّد. يمكن إزالته اختياريًا.
| الخاصية | النوع | القيمة الافتراضية |
|---|---|---|
"on-color" | "neutral" | "success" | "error" | "warning" | "info"عائلة اللون. `on-color` للوسوم على خلفيات لون العلامة. | "neutral" | |
| ||
"xs" | "sm" | "md"الارتفاع: `xs` 20px، و`sm` 24px، و`md` 32px. | "sm" | |
| ||
booleanبإطار فقط بدل التعبئة. | false | |
| ||
booleanزوايا مستديرة بالكامل (على شكل حبة). | false | |
| ||
booleanمربع بأيقونة فقط. يحتاج إلى `aria-label`. | false | |
| ||
() => voidيضيف زر إغلاق في النهاية. | لا توجد قيمة افتراضية | |
| ||
stringالاسم الذي يقرؤه قارئ الشاشة لزر الإغلاق. ترجمه في الصفحات العربية. | "Remove" | |
| ||
يقبل أيضًا خصائص العنصر الذي يُصيّره.
الاختلافات عن DGA
| التغيير | السبب |
|---|---|
--tag-background-on-color (light) و1 غيرها | White label on white-20 over the brand fill is 3.34:1. A black-20 tint keeps the tag visible and gives 6.30:1. |
Tag: text size | The export lists one sample text style. A 10px label in a 32px tag is hard to read; the sizes follow the site CSS (.tag--lg uses 14px). |
Tag: dismiss | Removable filter tags need a real button for keyboard and screen-reader users. |
Status Tag: ghost and dot | Ghost tags would otherwise all look the same; the dot is decorative and the label carries the status. |
عرض جميع الاختلافات (5) لهذا المكوّن أسباب الاختلافات مكتوبة بالإنجليزية.
التباين
248 زوجًا لونيًا فُحص · جميعها تجتاز WCAG 2.1 AAعرض 42 حالةإخفاء
| النمط / الحالة | الفاتح | الداكن |
|---|---|---|
| neutral / filled | 13.91:1 AAA | 11.57:1 AAA |
| neutral / filled (icon) | 17.31:1 3:1 | 12.71:1 3:1 |
| neutral / outlined | 13.91:1 AAA | 14.45:1 AAA |
| neutral / outlined (icon) | 17.31:1 3:1 | 15.87:1 3:1 |
| status neutral / subtle | 13.91:1 AAA | 11.57:1 AAA |
| status neutral / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status neutral / ghost (dot) | 17.31:1 3:1 | 15.87:1 3:1 |
| status neutral / inverted | 7.36:1 AAA | 7.66:1 AAA |
| success / filled | 7.55:1 AAA | 7.88:1 AAA |
| success / filled (icon) | 7.55:1 3:1 | 7.88:1 3:1 |
| success / outlined | 7.62:1 AAA | 10.80:1 AAA |
| success / outlined (icon) | 7.62:1 3:1 | 10.80:1 3:1 |
| status success / subtle | 7.55:1 AAA | 7.88:1 AAA |
| status success / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status success / ghost (dot) | 7.62:1 3:1 | 10.80:1 3:1 |
| status success / inverted | 5.69:1 AA | 8.72:1 AAA |
| info / filled | 7.61:1 AAA | 7.49:1 AAA |
| info / filled (icon) | 7.61:1 3:1 | 7.49:1 3:1 |
| info / outlined | 7.83:1 AAA | 9.88:1 AAA |
| info / outlined (icon) | 7.83:1 3:1 | 9.88:1 3:1 |
| status info / subtle | 7.61:1 AAA | 7.49:1 AAA |
| status info / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status info / ghost (dot) | 7.83:1 3:1 | 9.88:1 3:1 |
| status info / inverted | 4.56:1 AA | 9.24:1 AAA |
| warning / filled | 7.20:1 AAA | 8.57:1 AAA |
| warning / filled (icon) | 7.20:1 3:1 | 8.57:1 3:1 |
| warning / outlined | 7.19:1 AAA | 11.30:1 AAA |
| warning / outlined (icon) | 7.19:1 3:1 | 11.30:1 3:1 |
| status warning / subtle | 7.20:1 AAA | 8.57:1 AAA |
| status warning / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status warning / ghost (dot) | 7.19:1 3:1 | 11.30:1 3:1 |
| status warning / inverted | 5.42:1 AA | 9.32:1 AAA |
| error / filled | 7.96:1 AAA | 7.04:1 AAA |
| error / filled (icon) | 7.96:1 3:1 | 7.04:1 3:1 |
| error / outlined | 8.29:1 AAA | 9.01:1 AAA |
| error / outlined (icon) | 8.29:1 3:1 | 9.01:1 3:1 |
| status error / subtle | 7.96:1 AAA | 7.04:1 AAA |
| status error / ghost | 13.91:1 AAA | 14.45:1 AAA |
| status error / ghost (dot) | 8.29:1 3:1 | 9.01:1 3:1 |
| status error / inverted | 4.83:1 AA | 9.68:1 AAA |
| on-color / filled | 6.30:1 AA | 6.30:1 AA |
| on-color / outlined | 4.74:1 AA | 4.74:1 AA |
يحتاج النص إلى تباين 4.5:1، والأيقونات وحلقات التركيز إلى 3:1. الحالات المعطّلة مستثناة. تقرير التباين الكامل