Disclosure

نصب

pnpm dlx @simurgh-ui/cli add disclosure

import {
  Disclosure,
  DisclosureSummary,
  DisclosureContent,
} from '@simurgh-ui/react/disclosure';
import '@simurgh-ui/styles/disclosure.css';

Vue همین partها را صادر می‌کند. Angular از DisclosureComponent، DisclosureSummaryDirective و DisclosureContentDirective استفاده می‌کند.

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

Live component Disclosure ◆

Why use native disclosure?

It remains interactive before hydration and follows the browser accessibility model.

استفاده

<Disclosure open={open} onOpenChange={setOpen}>
  <DisclosureSummary>Simurgh چیست؟</DisclosureSummary>
  <DisclosureContent>
    مجموعه‌ای از primitiveهای رابط برای سه فریم‌ورک.
  </DisclosureContent>
</Disclosure>

<simurgh-disclosure [(open)]="open">
  <summary simurghDisclosureSummary>Simurgh چیست؟</summary>
  <div simurghDisclosureContent>
    مجموعه‌ای از primitiveهای رابط برای سه فریم‌ورک.
  </div>
</simurgh-disclosure>

رفتار و دسترس‌پذیری

Disclosure semantics بومی <details> و <summary> را حفظ می‌کند. Enter و Space روی Summary حالت open را تغییر می‌دهند و Tab طبق محتوای قابل‌مشاهده حرکت می‌کند. Summary باید عنوانی کوتاه و مستقل باشد.

برای یک بخش ساده Disclosure مناسب است؛ برای چند بخش با state هماهنگ از Accordion استفاده کنید. style نشانگر بازشدن نباید تنها نشانهٔ state باشد.

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