Drawer

نصب

pnpm dlx @simurgh-ui/cli add drawer

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from '@simurgh-ui/react/drawer';
import '@simurgh-ui/styles/drawer.css';

Vue همین partها را از @simurgh-ui/vue/drawer صادر می‌کند. Angular از DrawerComponent استفاده می‌کند.

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

Live component Drawer ◆

Edit profile

استفاده

<Drawer>
  <DrawerTrigger>ویرایش پروفایل</DrawerTrigger>
  <DrawerContent>
    <DrawerTitle>ویرایش پروفایل</DrawerTitle>
    <DrawerDescription>اطلاعات عمومی حساب را تغییر دهید.</DrawerDescription>
    <DrawerClose>تمام</DrawerClose>
  </DrawerContent>
</Drawer>

<simurgh-drawer
  #drawer
  labelledBy="drawer-title"
  describedBy="drawer-description"
>
  <button trigger (click)="drawer.show()">ویرایش پروفایل</button>
  <h2 id="drawer-title">ویرایش پروفایل</h2>
  <p id="drawer-description">اطلاعات عمومی حساب را تغییر دهید.</p>
  <button (click)="drawer.close()">تمام</button>
</simurgh-drawer>

focus و دسترس‌پذیری

Drawer modal است: focus هنگام بازبودن داخل آن می‌ماند، Escape آن را می‌بندد و focus به opener برمی‌گردد. title، description مناسب و دکمهٔ بستن قابل‌مشاهده ارائه دهید. برای محتوای غیرmodal کوتاه از Popover استفاده کنید.

state با open و callback در React، v-model:open در Vue و [(open)] یا show()/close() در Angular کنترل می‌شود.

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