nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Accordion

نمای کلی
۱۰ اکسپورت۷ محور واریانت۲۴ پراپ۴ فایل
import { Accordion, AccordionGroup } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

یک آکاردئون تنها به عنوان و محتوایش نیاز دارد. content نام دیگر children است؛ هرکدام در محل استفاده خواناتر بود همان را بدهید.

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

هر کالای بازنشده تا سی روز با بازپرداخت کامل مرجوع می‌شود. هزینه‌ی پست برگشت با ماست.

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>
    </>
  )
}

باز، کنترل‌شده و غیرفعال

defaultOpen آن را باز شروع می‌کند و بعد کاری به کارش ندارد. open به‌همراه onOpenChange وضعیت را به شما می‌سپارد — مثلاً وقتی آیتم باز از پارامتر URL می‌آید.

پشتیبانی هر روز از ۹ تا ۲۱ از طریق چت یا ایمیل در دسترس است. بیشتر تیکت‌ها زیر یک ساعت پاسخ می‌گیرند.

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

هر کالای بازنشده تا سی روز با بازپرداخت کامل مرجوع می‌شود. هزینه‌ی پست برگشت با ماست.

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="…" />
    </>
  )
}

نشانگر و اسلات پیشرو

indicatorPosition از جهت خواندن پیروی می‌کند. indicator کاملاً جای گلیف ＋ / － را می‌گیرد و startAdornment یک عنصر تزئینی پیش از عنوان اضافه می‌کند.

جای نشانگر

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

نشانگر سفارشی و آرایه

هر کالای بازنشده تا سی روز با بازپرداخت کامل مرجوع می‌شود. هزینه‌ی پست برگشت با ماست.

پشتیبانی هر روز از ۹ تا ۲۱ از طریق چت یا ایمیل در دسترس است. بیشتر تیکت‌ها زیر یک ساعت پاسخ می‌گیرند.

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="…"
      />
    </>
  )
}

گروه — چندتایی

AccordionGroup یک مجموعه را هماهنگ می‌کند. هر فرزند به یک id یکتا نیاز دارد، چون گروه همان را دنبال می‌کند. multiple پیش‌فرض است: بازکردن یکی کاری به بقیه ندارد.

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

هر کالای بازنشده تا سی روز با بازپرداخت کامل مرجوع می‌شود. هزینه‌ی پست برگشت با ماست.

پشتیبانی هر روز از ۹ تا ۲۱ از طریق چت یا ایمیل در دسترس است. بیشتر تیکت‌ها زیر یک ساعت پاسخ می‌گیرند.

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>
  )
}

گروه — تکی

single هنگام بازشدن یکی، بقیه را می‌بندد. collapsible={false} همیشه یک آیتم را باز نگه می‌دارد — برای پنلی که همواره باید چیزی نشان دهد.

سفارش‌های پیش از ساعت ۱۴ همان روز ارسال می‌شوند. تحویل داخل کشور دو تا چهار روز کاری طول می‌کشد.

هر کالای بازنشده تا سی روز با بازپرداخت کامل مرجوع می‌شود. هزینه‌ی پست برگشت با ماست.

پشتیبانی هر روز از ۹ تا ۲۱ از طریق چت یا ایمیل در دسترس است. بیشتر تیکت‌ها زیر یک ساعت پاسخ می‌گیرند.

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>
  )
}