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

KeyComponents

نمای کلی
۳۴ اکسپورت۰ محور واریانت۶۹ پراپ۸ فایل
import { ChartLegend, ChartLegendDot, ContentCard, ContentLabel, ControlLabel, HintText } from '@nili/ui';

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

برچسب

برچسب فیلدی که هر ورودی از آن استفاده می‌کند. ستاره و زیربرچسب از فناوری کمکی پنهان‌اند — الزامی‌بودن را خود required ورودی می‌رساند، و صفحه‌خوانی که «شمارهٔ تلفن ستاره اختیاری» می‌شنود سه بار یک چیز را شنیده، دو بارش متناقض.

فراموش کرده‌اید؟
import { Label, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <Label htmlFor="a">Email address</Label>
      <Label htmlFor="b" required>Email address</Label>
      <Label htmlFor="c" sublabel="(optional)">Email address</Label>
      <Label htmlFor="d" information informationLabel="Why we ask">
        Email address
      </Label>
      <Label htmlFor="e" hint={<LinkButton href="#" size="sm">Forgot?</LinkButton>}>
        Password
      </Label>
      <Label htmlFor="f" disabled>Email address</Label>
    </>
  )
}

متن راهنما

خطی که زیر فیلد می‌آید. status رنگش می‌دهد و icon آیکون متناسب را اضافه می‌کند. وضعیت error همان چیزی است که Text Input وقتی error بدهید رندر می‌کند.

این یک متن راهنماست برای کمک به کاربر.

این فیلد در دسترس نیست.

import { HintText } from "@nili/ui"

export function Example() {
  return (
    <>
      <HintText icon>This is a hint text to help user.</HintText>
      <HintText status="error" icon>Please enter a valid email.</HintText>
      <HintText status="disabled">This field is unavailable.</HintText>
    </>
  )
}

برچسب کنترل

همان ردیف برچسبی که Checkbox، Radio یا Switch درونی می‌سازند — برچسب، زیربرچسب، بَج، توضیح و یک کنش. صادر شده چون یک کنترل سفارشی باید شبیه کنترل‌های داخلی به نظر برسد.

(پیشنهادی)رایگانفقط دربارهٔ چیزهایی که خواسته‌اید به شما ایمیل می‌زنیم.مدیریت
import { ControlLabel, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <ControlLabel
      htmlFor="notify"
      label="Email notifications"
      sublabel="(recommended)"
      badge={<Badge size="small" color="green" appearance="lighter">Free</Badge>}
      description="We will only email you about things you asked for."
      linkButton={<LinkButton href="#" size="sm">Manage</LinkButton>}
    />
  )
}

قدرت گذرواژه

چهار سطح. خود نوار به‌تنهایی تزئینی است — label را بدهید تا حکم نوشته شود، نه اینکه به یک رنگ سپرده شود.

گذرواژهٔ ضعیف
می‌تواند قوی‌تر باشد
گذرواژهٔ قوی
import { PasswordStrength, TextInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextInput type="password" label="Password" />
      <PasswordStrength strength="moderate" label="Could be stronger" />
    </>
  )
}

آیکون کلیدی

آیکون قاب‌داری که سرِ یک مودال، حالت خالی یا کارت محتوا می‌نشیند. دو ظاهر، ده رنگ، پنج اندازه.

lighter
stroke
اندازه‌ها
import { KeyIcon, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <KeyIcon color="purple"><Icon icon={RiSparkling2Line} /></KeyIcon>
      <KeyIcon color="purple" appearance="stroke"><Icon icon={RiSparkling2Line} /></KeyIcon>
      <KeyIcon color="purple" size="2xl"><Icon icon={RiSparkling2Line} /></KeyIcon>
    </>
  )
}

راهنمای نمودار

با onToggle به‌صورت دکمه‌ای با aria-pressed رندر می‌شود، چون روشن و خاموش‌کردن یک سری یک کنترل است. بدون آن، متن ساده. value از پیش قالب‌بندی‌شده است — ارقام تصمیم لوکال‌اند، نه تصمیم راهنمای نمودار.

قابل‌تغییر (یکی را بزنید)
نقطه‌ها
import { ChartLegend, ChartLegendDot } from "@nili/ui"

export function Example() {
  const [hidden, setHidden] = useState<string[]>([])

  return (
    <>
      {series.map((item) => (
        <ChartLegend
          key={item.key}
          color={item.color}
          value={item.value}
          hidden={hidden.includes(item.key)}
          onToggle={() => toggle(item.key)}
        >
          {item.label}
        </ChartLegend>
      ))}

      {/* just the dot */}
      <ChartLegendDot color="blue" />
    </>
  )
}

برچسب محتوا و کارت محتوا

یک عنوان با اسلات پیشرو و انتهایی اختیاری. فیگما شش Type می‌کشد — آواتار، آیکون، برند، شرکت — و همه همان startAdornmentاند. Content Card نسخهٔ انتخاب‌شدنی است.

AL
Ada Lovelaceمالک · ada@nili.design
سیستم طراحیخصوصی۲۴ کامپوننت · ۲ روز پیش به‌روزرسانی شدv0.2
import { ContentLabel, ContentCard, KeyIcon, Avatar, Icon, Badge } from "@nili/ui"
import { RiFolderLine } from "@remixicon/react"

export function Example() {
  const [selected, setSelected] = useState("a")

  return (
    <>
      <ContentLabel
        startAdornment={<Avatar size="sm" name="Ada Lovelace" tone="blue" />}
        title="Ada Lovelace"
        description="Owner · ada@nili.design"
      />

      <ContentCard
        selected={selected === "a"}
        onSelect={() => setSelected("a")}
        startAdornment={
          <KeyIcon size="md" color="blue"><Icon icon={RiFolderLine} /></KeyIcon>
        }
        title="Design system"
        description="24 components · updated 2 days ago"
        badge={<Badge size="small" color="green" appearance="lighter">v0.2</Badge>}
      />
    </>
  )
}