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-size של האלמנט הזה יורד מתחת ל- tray-width + --pantoken-bp-md. ההתנהגות @pantoken/interactions מחליפה בנוסף את [should-overlay-tray]/.-should-overlay-tray (מעקף ידני) ומפיצה overlaytraychange עבור אפליקציות שצריכות את השינוי כאירוע.

תת־רכיבים ​

קשור ​

  • tray — שכבה חופפת בקצה שניתנת לשימוש עצמאי; פריסה זו שומרת על המגש והתוכן באותו הזרם.
  • context-view — משטח מעוגן קטן יותר לפעולות קונטקסטואליות ולפרטים.