スプリッターの API

インポート

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 を併用すると2倍動きます。
`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`		このペインをリサイズするハンドルの名前。

2つのペインの間にあるハンドル。

NuiSplitterHandle: プロパティ
名前	型	デフォルト	説明
`label`入力	`string`	`the pane's label`	ハンドルの名前。ペインのラベルで名前が付かない場合に使います。
`disabled`入力	`boolean`	`false`	ハンドルを動かせなくします。
`toggle`メソッド	`() => void`		隣のペインを折りたたむか、元に戻します。