分隔面板 API · Needless UI

导入

import-splitter.ts

import { NuiSplitter, NuiSplitterHandle, NuiSplitterPane } from '@needless-ui/angular/splitter';

一组面板，面板之间有分隔条。

NuiSplitter: 属性
名称	类型	默认值	说明
`orientation`输入	`'horizontal' \| 'vertical'`	`'horizontal'`	左右并排，还是上下堆叠。
`sizes`双向绑定	`number[]`	`shared evenly`	各面板所占的比例，以百分比表示，按顺序排列。
`storageKey`输入	`string`		以此键把尺寸保存在 `localStorage` 中。
`step`输入	`number`	`5`	方向键每次移动分隔条的幅度，以百分比表示。按住 Shift 时加倍。
`move`方法	`(index: number, delta: number) => void`		将某个面板之后的边界移动指定的百分比。

一个面板。它的各项尺寸可以用像素、rem 或百分比表示。

NuiSplitterPane: 属性
名称	类型	默认值	说明
`defaultSize`输入	`string \| number (e.g. '240px', '30%')`		没有可恢复的尺寸时，面板的初始尺寸。
`min`输入	`string \| number`	`0`	面板的最小尺寸。
`max`输入	`string \| number`	`'100%'`	面板的最大尺寸。
`collapsible`输入	`boolean`	`false`	面板可以折叠：拖到小于最小尺寸的一半，或按 Enter 键。
`collapsedSize`输入	`string \| number`	`0`	折叠后的尺寸，例如只显示一列图标的窄条。
`label`输入	`string`		为调整此面板大小的分隔条命名。

两个面板之间的分隔条。