Skip to content

布局面板

@astryxdesign/core v0.7.1 · LayoutPanel

属性 ​

属性类型默认值说明
hasDividerbooleanfalse在朝内容的那条边上画一条线。紧挨着的 ResizeHandle 已经在同一条边画线时,这里就不要开。
isScrollablebooleantrue内容比面板高的时候,在面板里滚动。
labelstring—这个地标的无障碍名称。
paddingSpacingStep—用间距刻度写内边距,会盖掉外层布局传下来的值。写 0 就是通栏。
resizableLayoutResizable—useResizable 返回的 props。传了它宽度就由那个 hook 说了算,width 不再生效。旁边要放一个 ResizeHandle,并把同一个对象交给它。对象里带着这块区域的轴 _direction('horizontal' | 'vertical'),要和把手的 direction 一致。只有 _size 是必填的,手写 { _size: 250 } 依然可用。
rolestring—ARIA 地标角色,例如 navigation。
widthnumber | string—面板宽度。写数字按像素,写字符串原样使用。传了 resizable 就不起作用。

SpacingStep 可以取这些值:

ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10

插槽 ​

  • default:面板内容。

模板引用 ​

LayoutPanel 公开 element。 类型为 HTMLDivElement | null。

原生属性 ​

根元素会接收 HTML 属性、aria-* 属性、data-* 属性、class 和 style。class 会和组件自己的类合并。