Seçenek grubu

Radyolar, küçük ve görünür bir kümeden tam olarak bir seçeneği seçmek içindir. radio() bir tane işler; choiceGroup() bütün kümeyi bir diziden kurar ve ona, onu bir girdi yığını değil bir grup yapan başlığı ve role="radiogroup" rolünü verir.

Bir name paylaşırlar, bu yüzden birbirini dışlamayı ve aralarındaki ok tuşu gezinmesini tarayıcı halleder. Burada hiçbir şey betik yayımlamaz.

Temel seçenek grubu

Plan

ÜcretsizProTakım

choiceGroup({
  legend: 'Plan',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Ücretsiz' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Takım' },
  ],
})

Bir sırada

Kısa etiketler tek satırda daha iyi okunur. Uzun olanlar yığılı kalmalıdır, ki varsayılan da budur.

Cihaz biçimi

desktopmobile

choiceGroup({
  legend: 'Cihaz biçimi',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

Düz dizeler

Değer ile etiket aynı olduğunda dize geçirin.

Günlük düzeyi

infowarnerrorsilent

choiceGroup({
  legend: 'Günlük düzeyi',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Devre dışı seçenekler

İşleyici

StatikSunucu adalarıTam SSR

Tam SSR bir Node sunucusu ister, bu projede öyle bir şey yok.

choiceGroup({
  legend: 'İşleyici',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Statik' },
    { value: 'islands', label: 'Sunucu adaları' },
    { value: 'ssr', label: 'Tam SSR', disabled: true },
  ],
  help: 'Tam SSR bir Node sunucusu ister, bu projede öyle bir şey yok.',
})

Teker teker

Seçenekler bir diziden gelecek kadar benzeşmiyorsa — örneğin her birinin kendi açıklaması varsa — doğrudan radio() kullanın.

Her gönderimdeYalnızca etiketli sürümlerdeElle

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'Her gönderimde', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Yalnızca etiketli sürümlerde' }),
  radio({ name: 'deploy', value: 'manual', label: 'Elle' }),
)

Renkler

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

Bir kartta

Derleme ayarları

Bir sonraki dağıtımda uygulanır

Temiz URL’ler

AçıkKapalı

Görseller

Yeniden boyutlandır ve dönüştürOlduğu gibi kopyala

card(
  cardHeader({ title: 'Derleme ayarları', subtitle: 'Bir sonraki dağıtımda uygulanır' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'Temiz URL’ler',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Açık' },
          { value: 'off', label: 'Kapalı' },
        ],
      }),
      choiceGroup({
        legend: 'Görseller',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Yeniden boyutlandır ve dönüştür' },
          { value: 'copy', label: 'Olduğu gibi kopyala' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Kaydet'),
  ),
)

Proplar

choiceGroup():

Prop	Tür	Varsayılan	Açıklama
`legend`	`Child`	—	Bütün grup için etiket.
`name`	`string`	—	Ortak form adı — radyoları birbirini dışlar kılan şey.
`options`	`Array`	`[]`	Dizeler ya da { value, label, disabled } nesneleri.
`value`	`string \| number \| Array`	—	Hangi seçeneğin işaretli olduğu. Onay kutuları için bir dizi.
`type`	`'radio' \| 'checkbox'`	`'radio'`	Hangi denetimin kurulacağı. Grup rolünü de seçer.
`direction`	`'row' \| 'column'`	`'column'`	Seçeneklerin nasıl dizildiği.
`help`	`Child`	—	Grubun altındaki ipucu.

radio(), checkbox() ile aynı propları alır: label, color, checked, name, value ve disabled.