CSS: drawer-layout

.instui-drawer-layout — Bố cục chia đôi với một khay bên có thể thu gọn và một ngăn nội dung chính có thể cuộn.

-placement-end và giá trị mặc định (start) đều sử dụng các thuộc tính logic flex-direction/inset-inline-*, không phải left/right, nên phía của khay tự theo direction/dir="rtl" — không cần quy tắc RTL riêng biệt.

Source: drawer-layout.css

Khả năng truy cập

Khi khay đóng vai trò điều hướng, gán nhãn cho nó bằng một tiêu đề có thể truy cập hoặc aria-label. Cấp cho .content role="region" (quy ước DrawerLayout của InstUI) và đặt tên cho nó bằng aria-label/aria-labelledby khi bối cảnh một mình không xác định được.

Sử dụng

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

Các ví dụ

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

Cấu trúc

.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;

Bộ sửa

Bộ sửa	Mô tả
.-open	Hiển thị khay ngay cả khi thuộc tính open không có.
.-placement-end	Ghim khay ở phía inline-end.
.-placement-start	Ghim khay ở phía inline-start (mặc định; đặt rõ ràng).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Phần

Phần	Mô tả
.content	Ngăn chính.
.tray	Bảng điều khiển bên.

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-bp-md	—	—	Ngưỡng chiều rộng cho chế độ phủ (30em, có chủ đề thông qua tiện ích phản hồi).

Hỗ trợ trình duyệt

• Các thành viên drawer-layout.tray/drawer-layout.content chuyển sang chế độ phủ tự động thông qua truy vấn @container khi inline-size của phần tử này giảm xuống dưới tray-width + --pantoken-bp-md. Hành vi @pantoken/interactions còn bật/tắt [should-overlay-tray]/.-should-overlay-tray (một ghi đè thủ công) và phát ra overlaytraychange cho các ứng dụng cần thay đổi này như một sự kiện.

Các thành phần phụ

• drawer-layout.content
• drawer-layout.tray
• tray

Liên quan

• tray — Một lớp phủ cạnh độc lập; bố cục này giữ khay và nội dung trong cùng luồng.
• context-view — Một bề mặt neo nhỏ hơn cho các hành động ngữ cảnh và chi tiết.