参考
悬浮面板 Floating Panel
FloatingPanel：浮动面板。基于共享弹层容器，面板可拖拽、可调整大小，header 就是拖拽手柄。部件：Root、Trigger、Positioner、Content、Header、Title、Control、DragTrigger、StageTrigger、CloseTrigger、ResizeTrigger、Body。
Trigger · Positioner · Content · Header · Body · Title · ResizeTrigger · DragTrigger · StageTrigger · CloseTrigger · Control
#Body
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#CloseTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Content
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Control
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#DragTrigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Header
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Positioner
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#ResizeTrigger
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
axis | ResizeTriggerAxis | 调整手柄的轴向 |
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
allowOverflow | boolean | true | 拖拽时是否强制面板留在边界内 |
closeOnEscape | boolean | 按下 Escape 时是否关闭面板 | |
defaultOpen | boolean | false | 面板的初始展开状态；适合不需要受控展开状态的场景 |
defaultPosition | Point | 面板的初始位置；适合不需要受控位置的场景 | |
defaultSize | Size | 面板的默认尺寸 | |
dir | 'ltr' | 'rtl' | "ltr" | 文档的书写方向 |
disabled | boolean | 是否禁用面板 | |
draggable | boolean | true | 面板是否可拖拽 |
finalFocusEl | () => HTMLElement | null | 面板关闭时接收焦点的元素 | |
getAnchorPosition | (details: floatingPanel.AnchorPositionDetails) => Point | 返回面板打开时初始位置的函数；提供后替代默认位置 | |
getBoundaryEl | () => HTMLElement | null | 面板边界元素；调整尺寸时可用于重新计算边界矩形 | |
gridSize | number | 1 | 拖拽面板时的吸附网格 |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> | 浮动面板各元素的 id，便于组合使用 | |
initialFocusEl | () => HTMLElement | null | 面板打开时接收焦点的元素 | |
lockAspectRatio | boolean | 面板是否锁定宽高比 | |
maxSize | Size | 面板的最大尺寸 | |
minSize | Size | 面板的最小尺寸 | |
open | boolean | 面板的受控展开状态 | |
persistRect | boolean | 关闭时是否保留面板尺寸和位置 | |
position | Point | 面板的受控位置 | |
resizable | boolean | true | 面板是否可调整尺寸 |
restoreFocus | boolean | true | 面板关闭时是否把焦点还原到触发器 |
size | Size | 面板的尺寸 | |
strategy | 'absolute' | 'fixed' | "absolute" | 定位策略 |
translations | floatingPanel.IntlTranslations | 浮动面板的国际化文案 |
| 事件 | 载荷 |
|---|---|
exitComplete | — |
openChange | details: OpenChangeDetails |
update:open | open: boolean |
positionChange | details: PositionChangeDetails |
update:position | details: Point |
positionChangeEnd | details: PositionChangeDetails |
sizeChange | details: SizeChangeDetails |
update:size | details: Size |
sizeChangeEnd | details: SizeChangeDetails |
stageChange | details: StageChangeDetails |
#StageTrigger
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
stage | Stage | 面板当前所处阶段 |
#Title
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Trigger
纯造型的部件——自身没有属性，沿用部件结构的共享样式。