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" (اتفاقية InstUI لـ DrawerLayout) وسمِّه باستخدام 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 لهذا العنصر عن عرض الدرج + --pantoken-bp-md. كما تقوم سلوكيات @pantoken/interactions بالتبديل بين [should-overlay-tray]/.-should-overlay-tray (تجاوز يدوي) وتصدر overlaytraychange للتطبيقات التي تحتاج التغيير كحدث.

مكونات فرعية ​

ذات صلة ​

  • tray — تراكب حافة مستقل؛ يحافظ هذا التخطيط على الدرج والمحتوى في نفس التدفق.
  • context-view — سطح مثبت أصغر للإجراءات السياقية والتفاصيل.