分割窗格 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`		為調整此窗格大小的控點命名。

兩個窗格之間的控點。