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	Large。-size-lg の長い別名。
.-size-lg	Large。
.-size-md	（デフォルト）中。
.-size-medium	（デフォルト）中。-size-md の長い形式の別名。
.-size-regular	非推奨 — use .-size-md.
.-size-sm	Small。
.-size-small	Small。-size-sm の長い別名。
.-size-x-large	Extra large。-size-xl の長い別名。
.-size-x-small	Extra small。-size-xs の長い別名。
.-size-xl	Extra large。
.-size-xs	Extra small。

条件

型	クエリ	説明
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 — これが基盤としている汎用のトップレイヤー表面。