nili/ui
enfaartr
Tüm bileşenler

Accordion

Genel görünüm
10 export7 varyant ekseni24 prop4 dosya
import { Accordion, AccordionGroup } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Tek bir akordiyon yalnızca bir başlık ve içeriğini ister. content, children için bir takma addır — çağrı yerinde hangisi daha iyi okunuyorsa onu verin.

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

Açılmamış her ürün otuz gün içinde tam iadeyle geri gönderilebilir. İade kargo ücretini biz karşılarız.

import { Accordion } from "@nili/ui"

export function Example() {
  return (
    <>
      <Accordion
        title="How long does delivery take?"
        content="Orders placed before 14:00 ship the same day."
      />

      {/* the same thing, as children */}
      <Accordion title="What is the return policy?">
        Anything unopened can be returned within thirty days.
      </Accordion>
    </>
  )
}

Açık, denetimli ve devre dışı

defaultOpen onu açık başlatır ve karışmaz. open ile onOpenChange durumu size devreder — açık öğenin bir URL parametresi olduğu bir akordiyon için.

Destek her gün 09:00–21:00 arasında sohbet veya e‑postayla açıktır. Taleplerin çoğu bir saat içinde yanıtlanır.

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

Açılmamış her ürün otuz gün içinde tam iadeyle geri gönderilebilir. İade kargo ücretini biz karşılarız.

import { Accordion } from "@nili/ui"

export function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <Accordion defaultOpen title={t('states.startsOpen')} content="…" />

      <Accordion
        open={open}
        onOpenChange={setOpen}
        title="Controlled"
        content="…"
      />

      <Accordion disabled title="Disabled" content="…" />
    </>
  )
}

Gösterge ve öndeki yuva

indicatorPosition okuma yönünü izler. indicator ＋ / － simgesinin tamamen yerini alır; startAdornment başlıktan önce süsleyici bir öğe ekler.

gösterge konumu

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

özel gösterge ve süsleme

Açılmamış her ürün otuz gün içinde tam iadeyle geri gönderilebilir. İade kargo ücretini biz karşılarız.

Destek her gün 09:00–21:00 arasında sohbet veya e‑postayla açıktır. Taleplerin çoğu bir saat içinde yanıtlanır.

import { Accordion, Icon } from "@nili/ui"
import { RiQuestionLine, RiArrowDownSLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Accordion
        indicatorPosition="start"
        title={t('indicator.atStart')}
        content="…"
      />

      <Accordion
        indicator={<Icon icon={RiArrowDownSLine} />}
        title={t('indicator.custom')}
        content="…"
      />

      <Accordion
        startAdornment={<Icon icon={RiQuestionLine} size={20} />}
        title={t('indicator.withIcon')}
        content="…"
      />
    </>
  )
}

Grup — çoklu

AccordionGroup bir kümeyi eşgüdümler. Her çocuğun benzersiz bir id’si olmalı; grup onu izler. Varsayılan multiple: birini açmak diğerlerine dokunmaz.

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

Açılmamış her ürün otuz gün içinde tam iadeyle geri gönderilebilir. İade kargo ücretini biz karşılarız.

Destek her gün 09:00–21:00 arasında sohbet veya e‑postayla açıktır. Taleplerin çoğu bir saat içinde yanıtlanır.

import { Accordion, AccordionGroup } from "@nili/ui"

export function Example() {
  return (
    <AccordionGroup defaultValue={["shipping"]}>
      <Accordion id="shipping" title="How long does delivery take?" content="…" />
      <Accordion id="returns" title="What is the return policy?" content="…" />
      <Accordion id="support" title="How do I reach support?" content="…" />
    </AccordionGroup>
  )
}

Grup — tekli

single biri açılınca ötekileri kapatır. collapsible={false} her zaman bir öğeyi açık tutar — sürekli bir şey göstermesi gereken bir panel için.

Saat 14:00’ten önce verilen siparişler aynı gün kargolanır. Yurt içi teslimat iki ila dört iş günü sürer.

Açılmamış her ürün otuz gün içinde tam iadeyle geri gönderilebilir. İade kargo ücretini biz karşılarız.

Destek her gün 09:00–21:00 arasında sohbet veya e‑postayla açıktır. Taleplerin çoğu bir saat içinde yanıtlanır.

import { Accordion, AccordionGroup } from "@nili/ui"

export function Example() {
  return (
    <AccordionGroup type="single" collapsible={false} defaultValue={["shipping"]}>
      <Accordion id="shipping" title="How long does delivery take?" content="…" />
      <Accordion id="returns" title="What is the return policy?" content="…" />
    </AccordionGroup>
  )
}