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

Radio

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

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

گروه

RadioGroup یک name را بین رادیوهایش مشترک می‌کند — و اگر ندهید خودش می‌سازد. بدون آن مرورگر آن‌ها را یک گروه نمی‌بیند و کلیدهای جهت دیگر بینشان حرکت نمی‌کنند.

Plan
import { Radio, RadioGroup } from "@nili/ui"

export function Example() {
  const [plan, setPlan] = useState("pro")

  return (
    <RadioGroup value={plan} onValueChange={setPlan} title={t('plan.label')}>
      <Radio value="free" label={t('plan.free')} />
      <Radio value="pro" label={t('plan.pro')} />
      <Radio value="team" label={t('plan.team')} />
    </RadioGroup>
  )
}

جهت

پیش‌فرض عمودی است. افقی برای دو سه گزینهٔ کوتاه خوب کار می‌کند — بیشتر که شود ردیف می‌شکند و گروه‌بندی دیگر خوانده نمی‌شود.

افقی
گروه غیرفعال و نامعتبر
یکی را انتخاب کنید
import { Radio, RadioGroup } from "@nili/ui"

export function Example() {
  return (
    <RadioGroup orientation="horizontal" defaultValue="monthly" label="Billing">
      <Radio value="monthly" label={t('billing.monthly')} />
      <Radio value="yearly" label={t('billing.yearly')} />
    </RadioGroup>
  )
}

ردیف برچسب

همان چهار اسلات Checkbox: sublabel، badge، description و linkButton. labelPosition کنترل را به سمت دیگر می‌برد.

Plan
(پرطرفدارترین)۲۰٪ تخفیفهرچه در پلن رایگان هست، به‌علاوهٔ پروژهٔ نامحدود.مقایسهٔ پلن‌ها
یک پروژه، یک کاربر.
import { Radio, RadioGroup, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <RadioGroup defaultValue="pro" title={t('plan.label')}>
      <Radio
        value="pro"
        label="Pro"
        sublabel="(most popular)"
        badge={<Badge size="small" color="blue" appearance="lighter">Save 20%</Badge>}
        description="Everything in Free, plus unlimited projects."
        linkButton={<LinkButton href="#" size="sm">Compare plans</LinkButton>}
      />
      <Radio value="free" label="Free" description="One project, one seat." />
    </RadioGroup>
  )
}

کارت رادیویی

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

روش پرداخت
import { RadioGroup, RadioCard, KeyIcon, Icon } from "@nili/ui"
import { RiBankCardLine, RiWallet3Line } from "@remixicon/react"

export function Example() {
  const [method, setMethod] = useState("card")

  return (
    <RadioGroup value={method} onValueChange={setMethod} title="Payment method">
      <RadioCard
        value="card"
        label="Card"
        description="Visa, Mastercard or a local card."
        startAdornment={
          <KeyIcon size="md" color="blue"><Icon icon={RiBankCardLine} /></KeyIcon>
        }
      />
      <RadioCard
        value="wallet"
        label="Wallet"
        sublabel="balance ۱۲۰٬۰۰۰"
        startAdornment={
          <KeyIcon size="md" color="green"><Icon icon={RiWallet3Line} /></KeyIcon>
        }
      />
    </RadioGroup>
  )
}