CSS: tray

.instui-tray — 一個固定於邊緣、可從任一側滑入的面板；原生的 [popover] 或 <dialog>。

起始/結束的放置相對於 inset-inline 解算（邏輯化、具方向感）；當位於祖先 [dir="rtl"] 之下時，滑入轉換會自動鏡像，因此右到左佈局不需要額外標記。

Source: tray.css

無障礙

托盤是一個對話框或彈出層表面，因此以 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%

瀏覽器支援

• 使用原生 [popover] API 和 @starting-style 開啟；滑入效果置於 @supports (transition-behavior: allow-discrete) 防護之後，因此不支援該防護的瀏覽器仍會開啟托盤，但不會有滑入效果。

子元件

• close-button

相關

• modal — 相同的可關閉覆蓋模式，改為置中而非固定於邊緣。
• popover — 此元件所構築的通用頂層表面。