@xwink/ui

Popover

锚在触发元素旁、不加遮罩的浮层(分享、导出、取色这类面板)。开合、焦点收放、Esc、点外面关闭、翻面与贴边都交给 Reka UI 的 Popover,本组件只做样式与两个开关。

触发器放进 trigger 插槽,开合由组件接管——不要在触发按钮上再写 @click="open = !open",会与组件自己的切换抵消。组件上的属性与 class 落在浮层内容上,宽度直接写 class(class="w-72")。

基础

点触发器开合,点外面或 Esc 关闭

点外面不关 + 高度过渡

:dismiss-on-outside="false" 给「边开着边改底下内容」的面板用,Esc 与再点触发器照常关。animate-height 让内容变高变矮时顶边钉住、只有底边带过渡伸缩——居中弹窗换内容时上下两边一起动、标题跟着跳,锚定浮层不该这样。

导出面板:切换格式时底边伸缩

API

Props

名称类型默认值说明
side"bottom" | "top" | "right" | "left" | undefined"bottom"—
align"start" | "center" | "end" | undefined"center"—
sideOffsetnumber | undefined8与触发器的间距(px)
modalboolean | undefinedfalse模态:抢焦点、挡外面的交互
dismissOnOutsideboolean | undefinedtrue点外面关不关。「边开着边改底下内容」的面板(导出、分享)关掉它;Esc 与再点触发器照常关
animateHeightboolean | undefinedfalse内容变高变矮时顶边钉住、底边带过渡伸缩
openboolean | undefinedfalse—

Emits

事件载荷说明
update:open[value: boolean]—

Slots

插槽说明
trigger—
default—