Appearance
Popper
Popper 是 floating-ui 的高阶封装, 不存在太多的自定义样式. 当你需要悬浮一个元素，且不想要其他样式的时候, Popper是一个很不错的选择.
基本用法
展开
响应式
popper的所有参数都是响应式的
展开
虚拟触发
展开
右键菜单
展开
反转和AutoPlacement有什么区别
flip与auto-placement最本质的区别就是, auto-placement并不一定是反方向的，但flip一般会在空间不足时反转到另一侧。
Props
Popper
| 参数名 | 参数类型 | 类型简介 | 示例 | 默认值 |
|---|---|---|---|---|
| virtualTrigger | Boolean | 是否使用虚拟触发器 | #虚拟触发 | false |
| triggerRef | HTMLElement | VirtualTrigger | 虚拟触发器元素 | #虚拟触发 | - |
| placement | Placement | 默认位置 | #基本用法 | 'top' |
| autoPlacement | Boolean | 是否自动选择位置 | #基本用法 | false |
| offset | Number | 浮动元素与触发器之间的偏移量 | #响应式 | 8 |
| flip | Boolean | 是否自动翻转位置 | - | true |
| middlewares | PopperMiddlewares | 自定义中间件 | - | [] |
| safepoly | Boolean | 安全三角形 | - | true |
| safepolyDebug | Boolean | 是否显示安全三角 | - | false |
Types
typescript
export type PopperTrigger = 'click' | 'hover' | 'contextmenu' | 'focus'
export type PopperPlacement = Placement;
export type PopperFlipOptions = FlipOptions;
export type PopperShiftOptions = ShiftOptions;
export type PopperMiddlewares = Middleware[]