CSS: drawer-layout ​

.instui-drawer-layout — یک چیدمان تقسیم‌شده با یک سینی جانبی جمع‌شدنی و یک پانل محتوای اصلی قابل اسکرول.

-placement-end و حالت پیش‌فرض (start) هر دو از خصوصیات منطقی flex-direction/inset-inline-* استفاده می‌کنند، نه left/right، بنابراین سمت سینی به‌طور خودکار از direction/dir="rtl" پیروی می‌کند — نیازی به قواعد جداگانه برای RTL نیست.

Source: drawer-layout.css

دسترس‌پذیری ​

وقتی سینی به‌عنوان ناوبری عمل می‌کند، آن را با یک عنوان قابل‌دستیابی یا aria-label برچسب‌گذاری کنید. به .content role="region" بدهید (قواعد DrawerLayout در InstUI) و هنگامی که متن زمینه به‌تنهایی کافی نیست، آن را با aria-label/aria-labelledby نام‌گذاری کنید.

نحوه استفاده ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

نمونه‌ها ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

ساختار ​

text
.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)
flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-openسینی را حتی زمانی که صفت open وجود ندارد نشان دهید.
.-placement-endسینی را در سمت inline-end لنگر کنید.
.-placement-startسینی را در سمت inline-start لنگر کنید (پیش‌فرض؛ آن را صراحتاً تنظیم می‌کند).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

قسمت‌ها ​

قسمتتوضیحات
.contentپانل اصلی.
.trayپانل جانبی.

خواص سفارشی ​

خاصیتنوعپیش‌فرضتوضیحات
--pantoken-bp-md——آستانه عرض برای حالت پوششی (30em، با تم از طریق ابزارهای پاسخگو).

پشتیبانی مرورگر ​

  • اعضای drawer-layout.tray/drawer-layout.content به‌صورت خودکار به حالت پوششی تغییر می‌کنند از طریق یک کوئری @container وقتی inline-size این عنصر کمتر از tray-width + --pantoken-bp-md شود. رفتار @pantoken/interactions علاوه بر این [should-overlay-tray]/.-should-overlay-tray (یک بازنویسی دستی) را تغییر می‌دهد و overlaytraychange را برای برنامه‌هایی که نیاز به اطلاع‌رسانی تغییر به‌صورت رویداد دارند منتشر می‌کند.

زیرمولفه‌ها ​

مرتبط ​

  • tray — یک پوشش لبه‌ای مستقل؛ این چیدمان سینی و محتوا را در یک جریان نگه می‌دارد.
  • context-view — یک سطح کوچک‌تر لنگرشده برای اعمال زمینه‌ای و جزئیات.