Accordion

Ne zaman kullanılır

Accordion, uzun içeriği başlıklara bölüp kullanıcının yalnızca ilgilendiği bölümü açmasını sağlar: sık sorulan sorular, ayar grupları, uzun bir formun bölümleri. Başlıkların hepsi her zaman görünür; içerik isteğe bağlı açılır.

Ne zaman kullanılmaz

• Tek bir bölümü açıp kapatmak için: Bağımsız tek bir açılır alan için Collapsible kullanın.
• Aynı bağlamın eş düzeyli görünümleri arasında geçiş için: Kullanıcı bir anda tek panele bakacaksa Tabs kullanın.
• Kullanıcının tüm içeriği okuması gerekiyorsa: İçeriği alt alta düz gösterin; gizlemek okumayı zorlaştırır.
• Bölümleri yalnızca görsel olarak ayırmak için: Separator kullanın.

Anatomi

Birinci başlık

Bölüm içeriği burada yer alır.

İkinci başlık

Üçüncü başlık

AçıkKoyu

Kodu kopyala

import { Accordion, AccordionItem } from '@bigbang/ui';

export default function Default() {
  return (
    <Accordion defaultValue={["first"]}>
      <AccordionItem value="first" title="Birinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="second" title="İkinci başlık">Bölüm içeriği burada yer alır.</AccordionItem>
      <AccordionItem value="third" title="Üçüncü başlık">Bölüm içeriği burada yer alır.</AccordionItem>
    </Accordion>
  );
}

1. Kök (Accordion): Öğeleri sarar; açık durumu, variant, size ve headingLevel buradan gelir.
2. Başlık düğmesi (AccordionItem başlığı): <hN> başlığının içindeki düğme; title, isteğe bağlı icon ve description taşır.
3. Ok: Açılınca yarım tur döner; süstür.
4. Panel: Açık öğenin içeriği; region olarak başlığa bağlıdır.

Davranış

• Tıklama, Enter ya da Space öğeyi açar veya kapatır. Varsayılanda bir öğe açılınca diğeri kapanır; multiple ile hepsi bağımsız çalışır.
• Açılırken içerik 150 ms’de belirir ve 4 px aşağı iner. Yükseklik bir anda değişir, hiçbir zaman animasyonlanmaz. Kapanış anidir.
• Kapalı paneller tarayıcının sayfada bulma özelliğiyle bulunabilir; eşleşme ilgili öğeyi açar. Kapatmak için hiddenUntilFound={false} verin.
• Durum denetimsiz için defaultValue, denetimli için value ve onValueChange ile yönetilir; ikisi de değer dizisi alır.

Yönergeler

• Başlıkları kısa ve ayırt edici tutun; kullanıcı yalnızca başlıklara bakarak içeriği tahmin edebilmeli.
• Sayfanın başlık sırasına uyun: headingLevel değerini üstündeki başlığın bir alt düzeyine ayarlayın.
• Sayfa içeriği için line, kart benzeri ayrı kutular için contained kullanın.
• Panelin içine uzun ve etkileşimli yapılar koymaktan kaçının; kullanıcı kaybolmamalı.
• Devre dışı öğenin nedenini yakında açıklayın; aksi halde öğeyi göstermeyin.

İçerik

• Başlıklar ad öbeğidir ya da kısa bir sorudur; sonuna nokta koymayın.
• description tek kısa cümledir ve başlığı tekrarlamaz.

Türkçe	İngilizce
Birinci başlık	First heading
Kısa açıklama metni	Short description text
Bölüm içeriği burada yer alır.	Section content goes here.

İlgili bileşenler

• Collapsible: Tek bir bölümü açıp kapatır.
• Tabs: Aynı bağlamın panelleri arasında geçiş yapar.
• Separator: Bölümleri çizgiyle ayırır.