RadioCard

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Kartlar RadioGroup içinde alt alta durur. icon ve meta isteğe bağlıdır.

Bildirim sıklığı

AnındaHer olayda bir bildirim.Günlük özetHer sabah tek bir e-posta.ÖnerilenHaftalık özetPazartesi sabahları.

import { RadioCard, RadioGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <RadioGroup label="Bildirim sıklığı" defaultValue="daily" className="max-w-md">
      <RadioCard value="instant" icon="bell" title="Anında" description="Her olayda bir bildirim." />
      <RadioCard value="daily" icon="mail" title="Günlük özet" description="Her sabah tek bir e-posta." meta="Önerilen" />
      <RadioCard value="weekly" icon="sun" title="Haftalık özet" description="Pazartesi sabahları." />
    </RadioGroup>
  );
}

Yatay

orientation="horizontal" kartları bir satıra dizer; her kart en az 224 px olur ve dar ekranda alt satıra geçer.

Bildirim sıklığı

AnındaHer olayda bir bildirim.Günlük özetHer sabah tek bir e-posta.Haftalık özetPazartesi sabahları.

import { RadioCard, RadioGroup } from '@bigbang/ui';

export default function Horizontal() {
  return (
    <RadioGroup label="Bildirim sıklığı" orientation="horizontal" defaultValue="instant">
      <RadioCard value="instant" title="Anında" description="Her olayda bir bildirim." />
      <RadioCard value="daily" title="Günlük özet" description="Her sabah tek bir e-posta." />
      <RadioCard value="weekly" title="Haftalık özet" description="Pazartesi sabahları." />
    </RadioGroup>
  );
}

Durumlar

Grup hatası her kartın kenarını tehlike rengine çevirir; tek bir kart devre dışı kalabilir.

Bildirim sıklığı

AnındaHer olayda bir bildirim.Günlük özetHer sabah tek bir e-posta.

Bir sıklık seçin.

Bildirim sıklığı

Günlük özetHer sabah tek bir e-posta.KapalıYöneticiniz kapattı.

import { RadioCard, RadioGroup } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex max-w-md flex-col gap-xl">
      <RadioGroup label="Bildirim sıklığı" required error="Bir sıklık seçin.">
        <RadioCard value="instant" title="Anında" description="Her olayda bir bildirim." />
        <RadioCard value="daily" title="Günlük özet" description="Her sabah tek bir e-posta." />
      </RadioGroup>
      <RadioGroup label="Bildirim sıklığı" defaultValue="daily">
        <RadioCard value="daily" title="Günlük özet" description="Her sabah tek bir e-posta." />
        <RadioCard value="off" title="Kapalı" description="Yöneticiniz kapattı." disabled />
      </RadioGroup>
    </div>
  );
}

Açık ve koyu mod

Seçili kart birincil kenarlık ve seçili yüzey rengi alır.

Bildirim sıklığı

AnındaHer olayda bir bildirim.Günlük özetHer sabah tek bir e-posta.ÖnerilenHaftalık özetPazartesi sabahları.

Bildirim sıklığı

AnındaHer olayda bir bildirim.Günlük özetHer sabah tek bir e-posta.ÖnerilenHaftalık özetPazartesi sabahları.

import { RadioCard, RadioGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <RadioGroup label="Bildirim sıklığı" defaultValue="daily" className="max-w-md">
      <RadioCard value="instant" icon="bell" title="Anında" description="Her olayda bir bildirim." />
      <RadioCard value="daily" icon="mail" title="Günlük özet" description="Her sabah tek bir e-posta." meta="Önerilen" />
      <RadioCard value="weekly" icon="sun" title="Haftalık özet" description="Pazartesi sabahları." />
    </RadioGroup>
  );
}