Сплиттер изменяет размер соседних панелей при перетаскивании разделителя.

В раскладке участвуют только панели, расположенные непосредственно в kbq-splitter, без элемента-обертки.

Panel 1
Panel 2

Атрибут appearance задает вид разделителя:

ВидОписание
dividerЛиния-разделитель. Используется по умолчанию
transparentНевидимый разделитель. Подходит, когда панели выделяются фоном или имеют собственную обводку
handleРучка для перетаскивания по центру

kbqSplitterOptionsProvider задает оформление по умолчанию для всего приложения или отдельного инжектора.

Panel 1
Panel 2

Атрибут orientation задает направление расположения панелей: при horizontal они располагаются в строку, при vertical — в столбец.

Panel 1
Panel 2

Атрибут disabled отключает изменение размера: разделители перестают реагировать на перетаскивание и нажатия клавиш, исключаются из порядка обхода и показывают обычный курсор.

Panel 1
Panel 2

Размер панели задают три атрибута:

АтрибутОписание
sizeНачальный размер. Панели без size делят между собой оставшееся место
minSizeНаименьший размер, до которого панель можно сжать
maxSizeНаибольший размер, до которого панель можно растянуть

Значением может быть число пикселей (240), строка с пикселями ('240px') или доля сплиттера ('30%'). В одном сплиттере единицы можно смешивать. Другие единицы, например rem или vw, не поддерживаются: такое значение игнорируется, а в режиме разработки в консоль выводится предупреждение.

Если соседняя панель достигает ограничения, разделитель продолжает двигаться: место для изменения размера отдают следующие панели, поэтому сдвигается и соседний разделитель.

Panel 1 min: 125px
Panel 2 size: 30%min: 25%, max: 40%
Panel 3 min: 125px

Атрибут snapSizes задает размеры, к которым притягивается панель. Если snapSizes задан у любой из двух панелей рядом с разделителем, minSize и maxSize обеих панелей тоже становятся точками привязки. При перетаскивании разделитель следует за курсором. Панель притягивается после его завершения.

Атрибут snapTolerance задает расстояние до точки привязки, при котором панель притягивается к ней. По умолчанию — 32 пикселя. Значение по умолчанию задает kbqSplitterOptionsProvider.

Panel 1
Panel 2 snap: 300px, 400pxtolerance: 100px

Атрибут collapsible позволяет сворачивать панель перетаскиванием, collapsedSize задает размер свернутой полоски. Промежуточных размеров у такой панели нет: при перетаскивании она останавливается на minSize. Если перетащить разделитель дальше половины minSize, панель сворачивается.

Если collapsedSize равен нулю, панель скрывается полностью, и разделителя для ее возврата не остается. Развернуть ее можно через двустороннюю привязку [(collapsed)], например кнопкой или сочетанием клавиш.

Sidebar Drag left to collapse
Editor
Terminal Drag bottom to collapse

Одна из панелей может содержать вложенные области с изменяемым размером.

Sidebar
Editor 1
Editor 2
Terminal

Разделитель попадает в порядок обхода между содержимым соседних панелей.

Клавиша или действие
Поведение
Left Arrow \ Right ArrowСдвигает вертикальный разделитель по направлению стрелки.
Up Arrow \ Down ArrowСдвигает горизонтальный разделитель по направлению стрелки.
HomeУстанавливает минимальный доступный размер панели. Если панель уже находится в минимальном размере и ее можно сворачивать, она сворачивается.
EndУстанавливает максимальный доступный размер панели. При необходимости уменьшает размер соседних панелей.
EnterСворачивает и разворачивает панель, если задан атрибут collapsible.
F6 \ Shift + F6Перемещает фокус к следующей или предыдущей панели.
Двойной щелчок мышиСбрасывает размеры до заданных панелями. Повторный двойной щелчок мыши устанавливает минимальный размер панели.
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.