nili/ui
enfaartr
Tüm bileşenler

Radio

Genel görünüm
16 export8 varyant ekseni57 prop4 dosya
import { Radio, RadioCard, RadioGroup } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Grup

RadioGroup radyoları arasında bir name paylaşır — vermezseniz üretir. O olmadan tarayıcı onları tek bir grup saymaz ve ok tuşları aralarında gezmeyi bırakır.

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>
  )
}

Yönelim

Varsayılan dikey. Yatay, iki üç kısa seçenek için işe yarar — fazlasında satır kırılır ve gruplama okunmaz olur.

yatay
devre dışı ve geçersiz grup
Birini seçin
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>
  )
}

Etiket satırı

Checkbox ile aynı dört yuva: sublabel, badge, description ve linkButton. labelPosition denetimi öteki tarafa geçirir.

Plan
(en popüler)%20 tasarrufÜcretsiz’deki her şey, üstüne sınırsız proje.Planları karşılaştır
Bir proje, bir koltuk.
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>
  )
}

Radyo kartı

Seçilebilir bir panel olarak çizilen bir radyo — plan seçiciler, ödeme yöntemleri. Figma’nın altı Type’ı tek bir startAdornment yuvasıdır: enum olsalardı birbirini dışlarlardı ve yedincisi yeni bir kitaplık sürümü isterdi.

Ödeme yöntemi
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>
  )
}