astryx-vue

弹出层

属性 ​

属性类型默认值说明
placement'above' | 'below' | 'start' | 'end''below'浮层相对触发元素的方向。所选方向空间不足时会自动翻转。
alignment'start' | 'center' | 'end''start'浮层沿位置方向的对齐方式：靠起始端、居中或靠末端。
isOpenboolean—受控显示状态。未设置时，开合由触发元素自行管理。
isEnabledbooleantrue是否启用。为 false 时触发元素无法打开浮层。
widthnumber | string触发元素宽度浮层宽度，数字单位为像素。未设置时最小与触发元素等宽，最大为 320px，且不超出视口。
padding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 103浮层内边距，取值对应 --astryx-spacing-* 令牌。
labelstring—浮层作为对话框时的无障碍名称，role 为 dialog 时应提供。
role'dialog' | 'none''dialog'浮层的语义角色：包含交互内容时使用 dialog；内容自带角色（例如菜单）时使用 none。
isModalbooleantrue浮层打开期间将 Tab 焦点限制在浮层内。仅对 dialog 角色生效。
hasCloseButtonbooleantrue是否显示关闭按钮。关闭按钮在获得焦点前保持视觉隐藏。
closeButtonLabelstring'Close'关闭按钮的文字，同时作为它的无障碍名称。
hasAutoFocusbooleantrue打开时是否把焦点移入浮层。仅对 dialog 角色生效。
hasLightDismissbooleantrue是否允许点击浮层与触发元素以外的区域来关闭。
hasEscapeDismissbooleantrue是否允许按下 Escape 关闭浮层。

事件 ​

  • openChange(isOpen: boolean)：浮层打开或关闭时触发，包括用户主动关闭。

插槽 ​

  • default：触发元素。请使用 button 或带有 role="button" 的元素。
  • content：浮层内容。

主题 ​

css
.my-popover {
  --astryx-popover-background: #fff;
  --astryx-popover-foreground: #000;
}
  • --astryx-popover-background：浮层背景色。
  • --astryx-popover-foreground：浮层文字颜色。
  • --astryx-popover-shadow：浮层阴影。
  • --astryx-popover-z-index：浮层的层叠顺序。