Collapsible

Сворачиваемая панель, управляемая кнопкой-триггером.

import { IconChevronRight } from "@tabler/icons-react";
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

export default function Particle() {
  return (
    <Collapsible>
      <CollapsibleTrigger className="inline-flex items-center gap-2 font-medium text-sm data-panel-open:[&_svg]:rotate-90">
        Показать ключи восстановления
        <IconChevronRight className="size-4" stroke={1.5} />
      </CollapsibleTrigger>
      <CollapsiblePanel>
        <ul className="flex flex-col gap-1 py-2 text-muted-foreground text-sm">
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            4829-1735-6621
          </li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            9182-6407-5532
          </li>
          <li className="rounded-sm bg-muted px-2 py-1 font-mono">
            3051-7924-9018
          </li>
        </ul>
      </CollapsiblePanel>
    </Collapsible>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/collapsible

Использование

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>

API

Collapsible

Корневой компонент. Псевдоним для Collapsible.Root из Base UI.

CollapsibleTrigger

Кнопка-триггер, которая разворачивает и сворачивает панель. Стилизованная обёртка над Collapsible.Trigger из Base UI.

CollapsiblePanel

Сворачиваемая панель с содержимым. Стилизованная обёртка над Collapsible.Panel из Base UI с анимированными переходами высоты. Также экспортируется как CollapsibleContent.

На этой странице

Установка Использование API Collapsible CollapsibleTrigger CollapsiblePanel