nili/ui
enfaartr
كل المكوّنات

Tag

عرض شامل
١٠ تصدير٥ محور تنويع١٥ خاصيّة٤ ملف
import { Tag, TagGroup } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

المظاهر

معالجتان — stroke على أبيض، أو gray على شريحة معبّأة.

StrokeGray
import { Tag } from "@nili/ui"

export function Example() {
  return (
    <>
      <Tag appearance="stroke">Stroke</Tag>
      <Tag appearance="gray">Gray</Tag>
    </>
  )
}

الحالات

يشير selected إلى وسم مطبَّق ويضيف aria-pressed حين يكون الوسم قابلًا للاختيار. أما disabled فيجعله رماديًا ويخرجه من ترتيب التنقّل.

ساكن
افتراضيمختارDisabledمختار
قابل للاختيار (جرّبه)
import { Tag } from "@nili/ui"

export function Example() {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <>
      <Tag
        selected={selected.includes("design")}
        onSelect={() => toggle("design")}
      >
        Design
      </Tag>
      <Tag disabled>{t('states.disabled')}</Tag>
    </>
  )
}

الفتحة المتقدّمة

يغطّي startAdornment كل أنواع فيجما في خاصية واحدة — أيقونة أو صورة رمزية أو علم أو شعار. ولو كانت قائمة ثابتة لصارت متنافية، ولاحتاج النوع السابع إلى إصدار جديد من المكتبة.

IconAda LovelaceIranWith sublabel24
import { Tag, Avatar, CountryFlag, Icon } from "@nili/ui"
import { RiPriceTag3Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Tag startAdornment={<Icon icon={RiPriceTag3Line} />}>
            {t('slot.icon')}
          </Tag>
      <Tag startAdornment={<Avatar size="3xs" name="Ada Lovelace" tone="blue" />}>
        Ada Lovelace
      </Tag>
      <Tag startAdornment={<CountryFlag code="ir" size="xs" />}>
            {t('slot.iran')}
          </Tag>
      <Tag sublabel="24">{t('slot.withSublabel')}</Tag>
    </>
  )
}

قابل للإزالة

يُظهر onDismiss زرّ الإزالة. وdismissLabel مطلوبة معه — فعلامة ✕ بلا اسم وصفي، وكل ما سيسمعه قارئ الشاشة هو «زر».

التصميمالهندسةالبحثالتسويق
import { Tag, TagGroup } from "@nili/ui"

export function Example() {
  const [tags, setTags] = useState(["Design", "Engineering"])

  return (
    <TagGroup label={t('group.filters')}>
      {tags.map((tag) => (
        <Tag
          key={tag}
          onDismiss={() => setTags((c) => c.filter((t) => t !== tag))}
          dismissLabel={`Remove ${tag}`}
        >
          {tag}
        </Tag>
      ))}
    </TagGroup>
  )
}