Collapsible

نصب

pnpm dlx @simurgh-ui/cli add collapsible

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@simurgh-ui/react/collapsible';
import '@simurgh-ui/styles/collapsible.css';

Vue همین partها را صادر می‌کند. Angular از CollapsibleComponent در @simurgh-ui/angular/collapsible استفاده می‌کند.

پیش‌نمایش واقعی

Live component Collapsible ◆

Project details

Three framework-native implementations.

استفاده

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>جزئیات</CollapsibleTrigger>
  <CollapsibleContent>محتوای تکمیلی</CollapsibleContent>
</Collapsible>

<Collapsible v-model:open="open">
  <CollapsibleTrigger>جزئیات</CollapsibleTrigger>
  <CollapsibleContent>محتوای تکمیلی</CollapsibleContent>
</Collapsible>

<simurgh-collapsible [(open)]="open">
  <span trigger>جزئیات</span>
  <div>محتوای تکمیلی</div>
</simurgh-collapsible>

state و صفحه‌کلید

React از open/onOpenChange یا defaultOpen، Vue از v-model:open و Angular از [(open)] استفاده می‌کنند. Tab trigger را focus می‌کند و Enter یا Space آن را تغییر می‌دهد.

Collapsible برای یک بخش مستقل است. برای مجموعه‌ای از چند بخش مرتبط که policy بازشدن مشترک دارند از Accordion استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.