پنل کناری (Sheet)

پنل کشویی از کنار صفحه

معرفی

کامپوننت Sheet یک پنل کشویی است که از کنار صفحه ظاهر می‌شود.

چه زمانی استفاده کنیم:

برای فرم‌های بلند (بیش از ۵ فیلد) که در Dialog جا نمی‌شوند
برای پنل‌های جزئیات (detail panel) در کنار لیست اصلی
برای تنظیمات، فیلترهای پیشرفته، یا پنل‌های ویرایش در desktop

چه زمانی استفاده نکنیم:

برای محتوای کوچک مثل تأیید — از Dialog استفاده کنید
برای تأیید اعمال مخرب — از AlertDialog استفاده کنید
برای filter panel در موبایل — از Drawer استفاده کنید

استفاده

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@parto-system-design/ui'
import { Button } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>باز کردن</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>عنوان</SheetTitle>
          <SheetDescription>توضیحات در اینجا قرار می‌گیرد</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

حالت‌ها و انواع

پیش‌فرض

جهت‌های مختلف

Sheet از چهار جهت باز شدن پشتیبانی می‌کند: top، right (پیش‌فرض در RTL)، bottom و left.

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">از بالا</Button>
  </SheetTrigger>
  <SheetContent side="top">
    <SheetHeader>
      <SheetTitle>عنوان</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

سمت‌های مختلف

<SheetContent side="right"> {/* پیش‌فرض */}
<SheetContent side="left">
<SheetContent side="top">
<SheetContent side="bottom">

راهنمای استفاده

بکنید

از side مناسب استفاده کنید — right (end) برای پنل‌های جزئیات، left (start) برای ناوبری - همیشه SheetTitle و SheetDescription را ارائه دهید - برای فرم‌های داخل Sheet، دکمه ذخیره را در پایین Sheet قرار دهید

نکنید

از Sheet در موبایل استفاده نکنید — از Drawer استفاده کنید - Sheet های تودرتو ایجاد نکنید - محتوای بسیار کوتاه (مثل یک پیام تأیید) را در Sheet قرار ندهید — از Dialog استفاده کنید

جدول ویژگی‌ها

Sheet

Prop

Type

SheetContent

Prop

Type

رفتار در RTL

پراپ side در این کامپوننت به صورت منطقی (logical) عمل می‌کند، نه فیزیکی:

side="right" به معنای سمت «انتها» (end) است:
- در چیدمان LTR: سمت راست صفحه
- در چیدمان RTL: سمت چپ صفحه
side="left" به معنای سمت «ابتدا» (start) است:
- در چیدمان LTR: سمت چپ صفحه
- در چیدمان RTL: سمت راست صفحه
side="top" و side="bottom" فیزیکی هستند و با تغییر جهت صفحه تغییر نمی‌کنند.

توجه: هنگام استفاده از Sheet در کنار Sidebar در نمای موبایل، کامپوننت Sidebar مقدار فیزیکی پراپ side خود را به Sheet ارسال می‌کند. بنابراین موقعیت نمایش Sidebar ممکن است در چیدمان RTL تغییر کند.