Collapsible

Ne zaman kullanılır

Collapsible, tek bir içerik bölümünü gizleyip gösterir: bir özetin altındaki ek ayrıntılar, ikincil bir açıklama, uzun bir notun devamı. Kullanıcı ayrıntıyı isterse açar; istemezse sayfa kısa kalır.

Ne zaman kullanılmaz

• Birden çok bölüm alt alta açılıp kapanacaksa: Accordion kullanın.
• Eş düzeyde bölümler arasında geçiş için: Tek bölüm görünüyorsa Tabs kullanın.
• Bir eylemi başlatmak için: Panel açmayan düğmeler için Button kullanın.
• Önemli bilgi için: Kullanıcının mutlaka görmesi gereken içeriği gizlemeyin.

Anatomi

Ayrıntıları göster

AçıkKoyu

Kodu kopyala

import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@bigbang/ui';

export default function Default() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Ayrıntıları göster</CollapsibleTrigger>
      <CollapsiblePanel className="pt-sm">Ek ayrıntılar burada yer alır.</CollapsiblePanel>
    </Collapsible>
  );
}

1. Kök (Collapsible): Açık durumunu tutar; open, defaultOpen, onOpenChange ve disabled alır.
2. Tetikleyici (CollapsibleTrigger): aria-expanded taşıyan <button>; etiket metni.
3. Ok: Etiketten sonra gelen süs ikonu; açılırken yarım tur döner. chevron={false} ile kalkar.
4. Panel (CollapsiblePanel): Açılıp kapanan içerik.

Davranış

• Tıklama ya da Enter, Space paneli açar ve kapatır.
• Açılırken içerik 4 px aşağı süzülerek belirir; yükseklik bir anda değişir, animasyonlanmaz (MOT-02). Kapanma anındadır.
• Kapalı panel varsayılan olarak hidden="until-found" taşır: tarayıcıda sayfada bul eşleşmesi paneli açar. Bunu kapatmak için hiddenUntilFound={false} verin.
• Durumu kapalıyken de korumak için keepMounted verin (hiddenUntilFound kapalıyken geçerlidir).
• Açık durumunu yönetmek için open ve onOpenChange kullanın.

Yönergeler

• Etiketin neyin açıldığını söylemesini sağlayın; “Daha fazla” yerine “Ayrıntıları göster”.
• Panel içinde boşluk bırakmak için className="pt-sm" gibi bir yerleşim sınıfı verin; bileşen kendi dolgusunu eklemez.
• Panelin içine uzun ve karmaşık içerik koymayın; o zaman ayrı bir sayfa düşünün.
• Etiket açık ve kapalı durumda aynı kalır. Farklı etiket gerekiyorsa open ile kontrollü kullanın ve iki etiketi siz yazın.
• Bir sayfada çok sayıda Collapsible yan yana gerekiyorsa Accordion kullanın.

İçerik

• Etiket kısa bir eylem öbeğidir; nokta koymayın.
• Panel metni tam cümle olabilir.

Türkçe	İngilizce
Ayrıntıları göster	Show details
Gelişmiş seçenekler	Advanced options
Notun devamı	Rest of the note

İlgili bileşenler

• Accordion: Birden çok bölümü alt alta açıp kapatır.
• Tabs: Eş düzeyde bölümler arasında geçiş yapar.
• Button: Bir eylemi başlatır.