CSS: tray

.instui-tray — Một bảng ghim vào cạnh trượt vào từ bất kỳ phía nào; một [popover] hoặc <dialog> nguyên bản.

Vị trí bắt đầu/kết thúc được giải quyết theo inset-inline (logic, nhận biết hướng); phép biến đổi trượt vào sẽ tự động phản chiếu khi có tổ tiên [dir="rtl"], nên không cần đánh dấu bổ sung cho bố cục phải‑sang‑trái.

Source: tray.css

Khả năng truy cập

Tray là bề mặt hộp thoại hoặc popover, nên đặt tên bằng aria-label hoặc aria-labelledby, và điều khiển đóng của nó mang aria-label (ví dụ .instui-close-button trong ví dụ sử dụng aria-label="Close").

Sử dụng

@import "@pantoken/components/components.css";
@import "@pantoken/components/tray.css";

Các ví dụ

<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Filters</span>
  <p class="-size-sm">A tray slides in from the start edge and fills the viewport height.</p>
</div>
<button class="instui-button -toggle">toggle tray</button>

Cấu trúc

.instui-tray
  close-button (component, 0..1)
  ‹content›

flowchart TD n0[".instui-tray"]:::cssdoc-root n1(["close-button"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot n0 -.->|0..1| n1 n0 --> n2 click n1 "/api/css/close-button.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ả
.-placement-bottom	Ghim vào cạnh dưới.
.-placement-end	Ghim vào cạnh cuối (inline-end).
.-placement-start	(mặc định) Ghim vào cạnh bắt đầu (inline-start).
.-placement-top	Ghim vào cạnh trên.
.-size-large	Lớn. Bút danh dài của -size-lg.
.-size-lg	Lớn.
.-size-md	(mặc định) Trung bình.
.-size-medium	(mặc định) Trung bình. Biệt danh dạng dài của -size-md.
.-size-regular	Không khuyến nghị — use .-size-md.
.-size-sm	Nhỏ.
.-size-small	Nhỏ. Bút danh dài của -size-sm.
.-size-x-large	Cực lớn. Bút danh dài của -size-xl.
.-size-x-small	Cực nhỏ. Bút danh dài của -size-xs.
.-size-xl	Cực lớn.
.-size-xs	Cực nhỏ.

Điều kiện

Kiểu	Truy vấn	Mô tả
supports	(transition-behavior: allow-discrete)	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-component-tray-background-color	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tray-border-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-tray-border-width	<length>	0.0625rem
--instui-component-tray-padding	<length>	1.5rem
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em
--instui-component-tray-z-index	<integer>	9999
--instui-elevation-topmost	none | <shadow>#	—
--tray-slide-x	—	-100%
--tray-slide-y	—	0%

Hỗ trợ trình duyệt

• Mở bằng API [popover] và @starting-style nguyên bản; phần trượt vào nằm phía sau hàng rào @supports (transition-behavior: allow-discrete), nên các trình duyệt không có hỗ trợ vẫn mở được tray, chỉ là không có hiệu ứng trượt.

Các thành phần phụ

• close-button

Liên quan

• modal — Cùng mẫu overlay có thể đóng, nhưng căn giữa thay vì ghim vào cạnh.
• popover — Bề mặt lớp trên chung mà thành phần này xây dựng dựa trên.