布局面板
@astryxdesign/core v0.7.1 · LayoutPanel
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
hasDivider | boolean | false | 在朝内容的那条边上画一条线。紧挨着的 ResizeHandle 已经在同一条边画线时,这里就不要开。 |
isScrollable | boolean | true | 内容比面板高的时候,在面板里滚动。 |
label | string | — | 这个地标的无障碍名称。 |
padding | SpacingStep | — | 用间距刻度写内边距,会盖掉外层布局传下来的值。写 0 就是通栏。 |
resizable | LayoutResizable | — | useResizable 返回的 props。传了它宽度就由那个 hook 说了算,width 不再生效。旁边要放一个 ResizeHandle,并把同一个对象交给它。对象里带着这块区域的轴 _direction('horizontal' | 'vertical'),要和把手的 direction 一致。只有 _size 是必填的,手写 { _size: 250 } 依然可用。 |
role | string | — | ARIA 地标角色,例如 navigation。 |
width | number | 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 会和组件自己的类合并。