스플리터 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`		이 패널의 크기를 조절하는 핸들의 이름.

두 패널 사이의 핸들입니다.

NuiSplitterHandle: 속성
이름	타입	기본값	설명
`label`입력	`string`	`the pane's label`	핸들의 이름. 패널의 레이블로 이름이 정해지지 않을 때 사용합니다.
`disabled`입력	`boolean`	`false`	핸들이 움직이지 않습니다.
`toggle`메서드	`() => void`		옆의 패널을 접거나 다시 펼칩니다.