Collapsible

Tek bir içerik bölgesini gösterip gizleyen buton. Başlıklı birden çok bölüm için Accordion kullan.

import { Collapsible, Text } from "@meridui/react";

export function Example() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Build ayrıntılarını göster</Collapsible.Trigger>
      <Collapsible.Content>
        <Text tone="muted">
          Build 1024, 2 dk 14 sn'de tamamlandı. 312 test geçti, 0 başarısız. eu-central'a deploy edildi.
        </Text>
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Import

import { Collapsible } from "@meridui/react";

Anatomi

<Collapsible.Root>
  <Collapsible.Trigger />
  <Collapsible.Content />
</Collapsible.Root>

Root açık/kapalı state'ini tutar ve bir <div> render'lar.
Trigger, aria-expanded ve aria-controls taşıyan bir <button>'dır. asChild ile kendi butonuna birleşir.
Content bölgenin kendisidir; kapalıyken hidden'dır ve forceMount verilmedikçe children'ı unmount eder.

Örnekler

Controlled, kendi butonunla

const [open, setOpen] = useState(false);

<Collapsible.Root open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger asChild>
    <Button variant="secondary" size="sm">
      {open ? "3 repository'yi gizle" : "3 repository daha göster"}
    </Button>
  </Collapsible.Trigger>
  <Collapsible.Content>
    <ul>
      <li>northwind-web</li>
      <li>northwind-api</li>
      <li>northwind-docs</li>
    </ul>
  </Collapsible.Content>
</Collapsible.Root>

API referansı

Root

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`disabled`	`boolean`	`false`	Açıp kapatmayı engeller; tetikleyici devre dışı kalır.
`ref`	`Ref<HTMLDivElement>`	–	Root'a iletilen ref.

Trigger

Tüm <button> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	<button> yerine tek child elemanı render'lar; props, ref ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

Content

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`forceMount`	`boolean`	`false`	Kapalıyken de children'ı (gizli olarak) mount'lu tutar; örneğin form state'ini korumak ya da sayfa içi aramaya izin vermek için.
`ref`	`Ref<HTMLDivElement>`	–	Bölgeye iletilen ref.

Stil verme

Sınıf	Eleman
`.mrd-collapsible`	Root
`.mrd-collapsible__trigger`	Trigger (`asChild` değilse)
`.mrd-collapsible__content`	Content

Attribute	Nerede	Değerler
`data-state`	Root, Trigger, Content	`open`, `closed`
`data-disabled`	Root, Trigger	devre dışıyken bulunur

Erişilebilirlik

WAI-ARIA Disclosure desenini izler. Tetikleyici gerçek bir buton olduğundan Enter ve Space ile çalışır ve açık/kapalı durumuyla birlikte okunur.

Tuş	Ne yapar
`Enter`	Bölgeyi açar ya da kapatır.
`Space`	Bölgeyi açar ya da kapatır.

Kullanım ilkeleri

Yap

Neyin gösterileceğini söyle: "Build ayrıntılarını göster", "3 repository daha göster".

Kaçın

Zorunlu form alanlarını ya da hata mesajlarını kapalı bir bölgeye saklamak.

İlgili sayfalar

Accordion: başlıklı birden çok bölüm.
Tabs: eşit ağırlıktaki paneller arasında geçiş.