API ของ Splitter · Needless UI

Import

import-splitter.ts

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

พาเนลหลายพาเนลที่มีที่จับคั่นอยู่ระหว่างกัน

NuiSplitter: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`orientation`Input	`'horizontal' \| 'vertical'`	`'horizontal'`	วางเคียงกัน หรือซ้อนกันในแนวตั้ง
`sizes`สองทาง	`number[]`	`shared evenly`	สัดส่วนของแต่ละพาเนลเป็นเปอร์เซ็นต์ เรียงตามลำดับ
`storageKey`Input	`string`		เก็บขนาดไว้ใน `localStorage` ภายใต้คีย์นี้
`step`Input	`number`	`5`	ระยะที่ปุ่มลูกศรเลื่อนที่จับ หน่วยเป็นเปอร์เซ็นต์ หากกด Shift ด้วยจะเลื่อนไกลเป็นสองเท่า
`move`เมธอด	`(index: number, delta: number) => void`		เลื่อนเส้นแบ่งที่อยู่ถัดจากพาเนลหนึ่งไปตามเปอร์เซ็นต์ที่ระบุ

พาเนลหนึ่งพาเนล ขนาดต่าง ๆ ของพาเนลกำหนดเป็นพิกเซล rem หรือเปอร์เซ็นต์ได้

NuiSplitterPane: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`defaultSize`Input	`string \| number (e.g. '240px', '30%')`		ขนาดตอนเริ่มต้น เมื่อไม่มีขนาดที่ต้องกู้คืน
`min`Input	`string \| number`	`0`	ขนาดเล็กที่สุด
`max`Input	`string \| number`	`'100%'`	ขนาดใหญ่ที่สุด
`collapsible`Input	`boolean`	`false`	พับเก็บได้ เมื่อถูกลากจนเล็กกว่าครึ่งหนึ่งของขนาดต่ำสุด หรือเมื่อกด Enter
`collapsedSize`Input	`string \| number`	`0`	ขนาดเมื่อพับเก็บ เช่น แถบแคบ ๆ ที่มีแต่ไอคอน
`label`Input	`string`		ตั้งชื่อให้ที่จับที่ใช้ปรับขนาดพาเนลนี้

ที่จับระหว่างสองพาเนล

NuiSplitterHandle: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`label`Input	`string`	`the pane's label`	ตั้งชื่อให้ที่จับ เมื่อป้ายกำกับของพาเนลไม่ได้ตั้งชื่อให้
`disabled`Input	`boolean`	`false`	ที่จับเลื่อนไม่ได้
`toggle`เมธอด	`() => void`		พับเก็บพาเนลที่อยู่ข้าง ๆ หรือนำกลับมา