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	小号。
.-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 — 构建此功能的通用顶层表面。