CSS: tray

.instui-tray — แผงยึดขอบที่เลื่อนเข้าจากด้านใดก็ได้; [popover] หรือ <dialog> แบบเนทีฟ.

ตำแหน่งเริ่ม/จบถูกกำหนดสัมพันธ์กับ inset-inline (เชิงตรรกะ รู้ทิศทาง); การแปลงเลื่อนเข้าจะสะท้อนโดยอัตโนมัติเมื่ออยู่ภายใต้บรรพบุรุษ [dir="rtl"] ดังนั้นไม่จำเป็นต้องมีมาร์กอัปเพิ่มเติมสำหรับเค้าโครงจากขวาไปซ้าย.

Source: tray.css

การเข้าถึง

ถาดเป็นพื้นผิวแบบ dialog หรือ popover ดังนั้นตั้งชื่อด้วย aria-label หรือ aria-labelledby และตัวควบคุมปิดจะมี aria-label (ตัวอย่าง .instui-close-button ใช้ aria-label="Close").

การใช้งาน

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

ตัวอย่าง

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

โครงสร้าง

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

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
.-placement-bottom	ยึดไว้ที่ขอบด้านล่าง.
.-placement-end	ยึดไว้ที่ขอบท้าย (inline-end).
.-placement-start	(ค่าเริ่มต้น) ยึดไว้ที่ขอบเริ่ม (inline-start).
.-placement-top	ยึดไว้ที่ขอบด้านบน.
.-size-large	ใหญ่. ชื่อยาวของ -size-lg.
.-size-lg	ใหญ่.
.-size-md	(ค่าเริ่มต้น) ขนาดกลาง
.-size-medium	(ค่าเริ่มต้น) ขนาดกลาง — รูปแบบยาวของชื่อเรียก -size-md
.-size-regular	เลิกใช้ — use .-size-md.
.-size-sm	เล็ก.
.-size-small	เล็ก. ชื่อยาวของ -size-sm.
.-size-x-large	ใหญ่พิเศษ. ชื่อยาวของ -size-xl.
.-size-x-small	เล็กพิเศษ. ชื่อยาวของ -size-xs.
.-size-xl	ใหญ่พิเศษ.
.-size-xs	เล็กพิเศษ.

เงื่อนไข

ชนิด	การค้นหา	คำอธิบาย
supports	(transition-behavior: allow-discrete)	—

โทเค็นที่ใช้

Token	ชนิด	ค่า
--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%

รองรับเบราว์เซอร์

• เปิดด้วย API [popover] แบบเนทีฟ และ @starting-style; การเลื่อนเข้าอยู่ด้านหลังการป้องกัน @supports (transition-behavior: allow-discrete) ดังนั้นเบราว์เซอร์ที่ไม่มีการป้องกันนี้ยังคงเปิดถาดได้ แต่จะไม่มีการเลื่อน.

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

• close-button

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

• modal — รูปแบบ overlay ที่ปิดได้เช่นเดียวกัน แต่จัดกึ่งกลางแทนที่จะยึดขอบ.
• popover — พื้นผิวชั้นบนทั่วไปที่อันนี้สร้างขึ้นบน.