Accordion

Alt alta dizilmiş, açılıp kapanan bölümler; aynı anda bir ya da birden çok panel gösterir.

Her aktif kullanıcı için aylık ödeme yaparsın. Kullanılmayan kullanıcılar hesabına kredi olarak geçer.

import { Accordion } from "@merid/react";

export function Example() {
  return (
    <Accordion.Root type="single" defaultValue="billing">
      <Accordion.Item value="billing">
        <Accordion.Trigger>Faturalandırma nasıl işliyor?</Accordion.Trigger>
        <Accordion.Content>Her aktif kullanıcı için aylık ödeme yaparsın. Kullanılmayan kullanıcılar hesabına kredi olarak geçer.</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="export">
        <Accordion.Trigger>Verilerimi dışa aktarabilir miyim?</Accordion.Trigger>
        <Accordion.Content>Evet. Herhangi bir çalışma alanını Ayarlar'dan CSV ya da JSON olarak dışa aktarabilirsin.</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="sso" disabled>
        <Accordion.Trigger>SSO desteği var mı? (Enterprise)</Accordion.Trigger>
        <Accordion.Content>Enterprise planında SAML ve OIDC destekleniyor.</Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Import

tsx

import { Accordion } from "@merid/react";

Anatomi

tsx

<Accordion.Root type="single">
  <Accordion.Item value="a">
    <Accordion.Trigger />
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

Root, aynı anda tek bir item'ın mı (type="single") yoksa birden çok item'ın mı (type="multiple") açık olabileceğini belirler.
Item, bir tetikleyiciyi ve onun içeriğini benzersiz bir value altında gruplar.
Trigger, bir başlığın (varsayılan olarak h3) içine yerleştirilmiş, artı ikonlu bir <button>'dır.
Content, tetikleyicisiyle etiketlenen bir role="region"'dır. Children yalnızca açıkken render'lanır.

Örnekler

Multiple, controlled

type="multiple" ile value ve onValueChange bir string[] kullanır. headingLevel, sarmalayan başlığın seviyesini sayfanın başlık hiyerarşisine uyacak şekilde ayarlar.

Siparişler iki iş günü içinde kargoya verilir.

Açık: a

const [open, setOpen] = useState<string[]>(["a"]);

<Accordion.Root type="multiple" value={open} onValueChange={setOpen} headingLevel={4}>
  <Accordion.Item value="a">
    <Accordion.Trigger>Kargo</Accordion.Trigger>
    <Accordion.Content>Siparişler iki iş günü içinde kargoya verilir.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="b">
    <Accordion.Trigger>İade</Accordion.Trigger>
    <Accordion.Content>Kullanılmamış ürünleri 30 gün içinde iade edebilirsin.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="c">
    <Accordion.Trigger>Garanti</Accordion.Trigger>
    <Accordion.Content>Tüm donanımlarda iki yıl garanti.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Her zaman biri açık

Single bir accordion'da collapsible={false}, açık item'ın kapatılmasını engeller.

Repository'ni bağla.

<Accordion.Root type="single" defaultValue="one" collapsible={false}>
  <Accordion.Item value="one">
    <Accordion.Trigger>Birinci adım: bağla</Accordion.Trigger>
    <Accordion.Content>Repository'ni bağla.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="two">
    <Accordion.Trigger>İkinci adım: deploy et</Accordion.Trigger>
    <Accordion.Content>Deploy için main'e push et.</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

API referansı

Root (single)

defaultValue ve onChange dışındaki tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`type`Zorunlu	`"single"`	–	Aynı anda tek item açık olur.
`value`	`string`	–	Controlled açık item (hiçbiri için "").
`defaultValue`	`string`	–	Uncontrolled kullanımda başlangıçta açık olan item.
`onValueChange`	`(value: string) => void`	–	Açık item'ın value'su ile çağrılır (hepsi kapalıyken "").
`collapsible`	`boolean`	`true`	Açık item'ın kapatılmasına izin verir.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Her tetikleyiciyi saran başlığın seviyesi.
`ref`	`Ref<HTMLDivElement>`	–	Root elemanına iletilen ref.

Root (multiple)

Prop	Tip	Varsayılan	Açıklama
`type`Zorunlu	`"multiple"`	–	İstenen sayıda item açık olabilir.
`value`	`string[]`	–	Controlled açık item'lar.
`defaultValue`	`string[]`	–	Uncontrolled kullanımda başlangıçta açık olan item'lar.
`onValueChange`	`(value: string[]) => void`	–	Açık item'ların value'larıyla çağrılır.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Her tetikleyiciyi saran başlığın seviyesi.
`ref`	`Ref<HTMLDivElement>`	–	Root elemanına iletilen ref.

Item

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

Prop	Tip	Varsayılan	Açıklama
`value`Zorunlu	`string`	–	Bu item'ın benzersiz değeri.
`disabled`	`boolean`	`false`	Açılıp kapanmasını engeller.

Trigger

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

Prop	Tip	Varsayılan	Açıklama
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

Content

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

Prop	Tip	Varsayılan	Açıklama
`ref`	`Ref<HTMLDivElement>`	–	Region elemanına iletilen ref.

Stil verme

Sınıf	Eleman
`.mrd-accordion`	Root
`.mrd-accordion__item`	Item
`.mrd-accordion__heading`	Tetikleyiciyi saran başlık
`.mrd-accordion__trigger`, `.mrd-accordion__trigger-text`	Tetikleyici ve metni
`.mrd-accordion__icon`	Artı ikonu (açıkken döner)
`.mrd-accordion__content`	İçerik bölgesi

Attribute	Nerede	Değerler
`data-state`	Item, Trigger, Content	`open`, `closed`
`aria-expanded`	Trigger	`true`, `false`
`aria-disabled="true"`, `data-disabled`	Trigger	item devre dışıyken

WAI-ARIA Accordion desenini izler. Her tetikleyici bir başlığın içinde durur, aria-expanded ve aria-controls taşır; bölgesi de tetikleyiciyle etiketlenir. Devre dışı tetikleyicilere Tab ile hâlâ ulaşılır (aria-disabled ile), böylece ekran okuyucu onları okumaya devam eder; ama ok tuşları, Home ve End onları atlar.

Tuş	Ne yapar
`Enter`	Focus'taki bölümü açar ya da kapatır.
`Space`	Focus'taki bölümü açar ya da kapatır.
`Tab`	Açık içeriğin içindekiler dahil, focus alabilen bir sonraki elemana geçer.
`ArrowDown`	Bir sonraki etkin tetikleyiciye geçer; sona gelince başa döner.
`ArrowUp`	Bir önceki etkin tetikleyiciye geçer; başa gelince sona döner.
`Home`	İlk etkin tetikleyiciye geçer.
`End`	Son etkin tetikleyiciye geçer.

Kullanım ilkeleri

Yap

Accordion'ı, kullanıcıların başlığa bakarak taradığı ikincil içerik için kullan: SSS, ayar grupları, detaylar.

Kaçın

Herkesin okuması gereken içeriği gizlemek ya da accordion'a tek bir item koymak.

Yap

Tetikleyicileri soru ya da konu olarak yaz; sayfanın başlık yapısı düzgün okunsun.

Kaçın

Accordion'ları iç içe koymak.

İlgili sayfalar

Tabs
Card