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

Ne zaman kullanılır

Kullanıcının bir metni okuyup açıkça onaylaması gerektiğinde: kullanım koşulları, aydınlatma metni, açık rıza.

Ne zaman kullanılmaz

Kısa bir onay için: Tek cümlelik bir onay için Checkbox yeterlidir.
Birden çok bağımsız rıza için tek blok: Her rıza için ayrı bir ConsentBlock ya da Checkbox kullanın; zorunlu ve isteğe bağlı onayları birleştirmeyin.

Anatomi

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

Başlık: Metnin adı; kaydırma alanını adlandırır.
Sürüm ve bağlantı: Sürüm ya da tarih; tam metin yeni sekmede açılır.
Okuma çubuğu: Yalnızca requireScroll ile; okunan kısmı gösterir.
Metin alanı: En çok 240 px yüksekliğinde; altında solan bir geçiş daha fazla metin olduğunu söyler.
Onay kutusu: Kişinin kendi cümlesiyle.

Davranış

Metin alanı klavyeyle odaklanır ve ok tuşlarıyla kayar.
requireScroll ile onay kutusu metnin sonuna gelinene kadar devre dışıdır; altında nedeni yazar. Sona gelinince açılır ve duyurulur; yukarı kaydırmak yeniden kilitlemez.
Alana sığan kısa bir metin hemen okunmuş sayılır.
Alttaki solma, sona gelinince kaybolur.

Amaç başına onay (`items`)

KVKK kapsamındaki açık rıza her amaç için ayrı ve kanıtlanabilir olmalıdır. items her amaç için bir onay kutusu çizer; her öğe documentId, version, label ve documentName taşır ve onay kutusunun altında “Sürüm {version}” yazar. Belge adı bir düğmedir: onOpenDocument belgeyi sayfada (ör. AgreementViewer içeren bir Dialog) açar, yeni sekme açmaz. mustRead öğesi, belgesi readIds içinde olana dek kilitlidir ve altında “Önce metni okuyun” yazar. Kabul edilen id’ler value ve onValueChange ile gelir; hangi sürümün kabul edildiğinin kanıtını sunucu tutar. Tek onaylı biçim (title ve children) kullanımdan kalkıyor ve geliştirmede uyarı verir.

Yönergeler

Onay cümlesini kişinin ağzından yazın: “Koşulları okudum ve kabul ediyorum.”
Onay kutusunu önceden işaretlemeyin.
Hangi sürümün onaylandığını meta ile gösterin ve sunucuda kaydedin.
requireScroll yalnızca okumanın gerçekten gerektiği metinlerde kullanın.

İçerik

Anahtar	TR	EN
`ui.consent-block.scroll-hint`	Onaylamak için metni sonuna kadar kaydırın.	Scroll to the end of the text to accept.
`ui.consent-block.read`	Metnin sonuna geldiniz; artık onaylayabilirsiniz.	You reached the end of the text; you can accept now.
`ui.consent-block.full-text`	Tam metni aç	Open the full text
`ui.consent-block.version`	Sürüm {version}	Version {version}
`ui.consent-block.read-first`	Önce metni okuyun	Read the text first

İlgili bileşenler

Checkbox: Tek başına onay.
Form: Gönderimde hata özeti.