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 เมื่อขนาดแนวอินไลน์ขององค์ประกอบนี้ลดลงต่ำกว่า tray-width + --pantoken-bp-md. พฤติกรรม @pantoken/interactions ยังสลับ [should-overlay-tray]/.-should-overlay-tray (การยกเว้นด้วยตนเอง) และส่ง overlaytraychange สำหรับแอปที่ต้องการการเปลี่ยนแปลงเป็นเหตุการณ์

ส่วนประกอบย่อย ​

ที่เกี่ยวข้อง ​

  • tray — ชั้นวางแบบขอบโอเวอร์เลย์อิสระ; เลย์เอาท์นี้เก็บถาดและเนื้อหาไว้ในโฟลว์เดียวกัน
  • context-view — พื้นผิวยึดขนาดเล็กสำหรับการกระทำเชิงบริบทและรายละเอียด