nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Badge

نمای کلی
۱۵ اکسپورت۶ محور واریانت۱۷ پراپ۵ فایل
import { Badge, StatusBadge } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

ظاهرها

چهار پرداخت. نامش appearance است نه style — چون style پراپ خود ری‌اکت است و گرفتنش استایل اینلاین را غیرممکن می‌کرد.

filledlightlighterstroke
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge appearance="filled">Filled</Badge>
      <Badge appearance="light">Light</Badge>
      <Badge appearance="lighter">Lighter</Badge>
      <Badge appearance="stroke">Stroke</Badge>
    </>
  )
}

رنگ‌ها

ده رنگ که با هر ظاهری ترکیب می‌شوند. رنگ تزئین است؛ معنا را در متن برچسب بگذارید.

filled
grayblueorangeredgreenyellowpurpleskypinkteal
light
grayblueorangeredgreenyellowpurpleskypinkteal
lighter
grayblueorangeredgreenyellowpurpleskypinkteal
stroke
grayblueorangeredgreenyellowpurpleskypinkteal
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge color="gray">Gray</Badge>
      <Badge color="blue">Blue</Badge>
      <Badge color="green">Green</Badge>
      <Badge color="red">Red</Badge>
    </>
  )
}

اندازه‌ها

medium (۲۰ پیکسل) و small (۱۶ پیکسل).

MediumSmallMediumSmall
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge size="medium">Medium</Badge>
      <Badge size="small">Small</Badge>
    </>
  )
}

نقطه، آیکون و عدد

dot یک نقطه‌ی پیشرو می‌کشد؛ startIcon و endIcon هر نودی را می‌پذیرند. عدد خالی هم فقط children است — پراپ جداگانه‌ای برای شمارش وجود ندارد.

فعالجدید12%2غیرفعال
import { Badge, Icon } from "@nili/ui"
import { RiSparkling2Line, RiArrowUpLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Badge color="green" appearance="light" dot>
        Active
      </Badge>
      <Badge color="purple" startIcon={<Icon icon={RiSparkling2Line} />}>
        New
      </Badge>
      <Badge color="green" endIcon={<Icon icon={RiArrowUpLine} />}>
        12%
      </Badge>
      <Badge color="red">2</Badge>
    </>
  )
}

بَج وضعیت

کامپوننتی جداگانه، چون رنگ از وضعیت می‌آید: بَج «Completed» به‌طور تصادفی قرمز نمی‌شود. stroke یا light، با آیکون یا نقطه.

stroke
completedpendingfaileddisabled
light
completedpendingfaileddisabled
با نقطه
completedpendingfaileddisabled
import { StatusBadge } from "@nili/ui"

export function Example() {
  return (
    <>
      <StatusBadge status="completed">Completed</StatusBadge>
      <StatusBadge status="pending" appearance="light">Pending</StatusBadge>
      <StatusBadge status="failed" dot>Failed</StatusBadge>
      <StatusBadge status="disabled" icon={false}>Disabled</StatusBadge>
    </>
  )
}