Bileşenler

ConsentBlock

Kaydırılabilir bir alanda okunacak metin, okuma çubuğu ve sona kadar bekleyebilen bir onay kutusu.

Storybook: Storybook
Kaynak kod: Kaynak kod

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

requireScroll onay kutusunu metin sonuna kadar kilitler; üstteki çubuk okunan kısmı gösterir.

Kullanım koşulları

Sürüm 3 · 1 Ekim 2026Tam metni aç

Koşulları okudum ve kabul ediyorum.Onaylamak için metni sonuna kadar kaydırın.

import { ConsentBlock } from '@bigbang/ui';

export default function Default() {
  return (
    <ConsentBlock title="Kullanım koşulları" meta="Sürüm 3 · 1 Ekim 2026" href="#" checkboxLabel="Koşulları okudum ve kabul ediyorum." requireScroll className="max-w-lg">
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
      <p>Sorularınız için yardım sayfasından bize ulaşabilirsiniz.</p>
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
    </ConsentBlock>
  );
}

Hata

Onay verilmeden gönderilince error onay kutusunun altında görünür.

Kullanım koşulları

Koşulları okudum ve kabul ediyorum.Devam etmek için koşulları kabul edin.

import { ConsentBlock } from '@bigbang/ui';

export default function Error() {
  return (
    <ConsentBlock title="Kullanım koşulları" checkboxLabel="Koşulları okudum ve kabul ediyorum." error="Devam etmek için koşulları kabul edin." className="max-w-lg">
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
      <p>Sorularınız için yardım sayfasından bize ulaşabilirsiniz.</p>
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
    </ConsentBlock>
  );
}

Açık ve koyu mod

Metin alanı gömülü yüzey kullanır.

Kullanım koşulları

Sürüm 3 · 1 Ekim 2026Tam metni aç

Koşulları okudum ve kabul ediyorum.Onaylamak için metni sonuna kadar kaydırın.

Kullanım koşulları

Sürüm 3 · 1 Ekim 2026Tam metni aç

Koşulları okudum ve kabul ediyorum.Onaylamak için metni sonuna kadar kaydırın.

import { ConsentBlock } from '@bigbang/ui';

export default function Default() {
  return (
    <ConsentBlock title="Kullanım koşulları" meta="Sürüm 3 · 1 Ekim 2026" href="#" checkboxLabel="Koşulları okudum ve kabul ediyorum." requireScroll className="max-w-lg">
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
      <p>Sorularınız için yardım sayfasından bize ulaşabilirsiniz.</p>
      <p>Bu koşullar hizmetin nasıl kullanılacağını açıklar. Hesabınızı açarken ve kullanırken bu kurallara uymayı kabul edersiniz.</p>
      <p>Hesap bilgilerinizi güncel tutmak ve giriş bilgilerinizi kimseyle paylaşmamak sizin sorumluluğunuzdadır.</p>
      <p>Koşullar değiştiğinde size önceden bildirilir; yeni sürümü kabul etmeden önce değişiklikleri okuyabilirsiniz.</p>
    </ConsentBlock>
  );
}