Split API

Эта страница предоставляет обзор API компонента Split, детализируя его props, emits, слоты и экспонируемые методы/состояния.

Props

Компонент Split принимает следующие props:

Prop	Default	Type	Description
`autoSaveName`	`undefined`	`string` или `undefined`	Автоматически сохраняет конфигурацию панелей под этим именем.
`separatorType`	`"strip"`	`"strip"` или `"hexagon"` или `IconsProps["type"]`	Тип разделителя, используемого между панелями.
`separatorNotHoverOpacity`	`undefined`	`boolean` или `undefined`	Управляет прозрачностью разделителя, когда он не наведен.
`class`	`""`	`StyleClass` или `undefined`	Пользовательский CSS класс для контейнера компонента Split.
`styles`	`undefined`	`ISplitStyles` или `undefined`	Пользовательские стили для панелей в компоненте Split.
`units`	`"percentages"`	`"percentages"` или `"pixels"` или `undefined`	Единицы измерения для размеров панелей (`percentages` или `pixels`).
`panels`	`[]`	`Array<Panel>`	Список панелей в компоненте Split.
`direction`	`"horizontal"`	`"vertical"` или `"horizontal"` или `undefined`	Направление изменения размера панелей (`vertical` или `horizontal`).

Слоты

Компонент Split предоставляет динамические слоты для каждой панели:

Slot	Payload	Description
`default`	`{ size: number, panel: Panel }`	Слот по умолчанию для отображения контента внутри панелей. Каждый слот панели динамически именуется на основе свойства `name` панели.

Emits

Компонент Split испускает следующие события:

Event	Payload	Description
`updated-panels`	`{ panels: Record<Panel["name"], number> }`	Испускается, когда размеры панелей обновлены.
`updated-size-panel`	`{ panel: Size, namePanel: Panel["name"] }`	Испускается, когда размер одной панели обновлен.
`start-resize-panel`	`{ $event?: MouseEvent, namePanel?: Panel["name"] }`	Испускается, когда начинается изменение размера панели.
`stop-resize-panel`	`{ $event?: MouseEvent, namePanel?: Panel["name"] }`	Испускается, когда изменение размера панели завершается.
`move-resize-panel`	`{ $event: MouseEvent, namePanel: Panel["name"] }`	Испускается, когда панель активно изменяется в размере.
`out-resize-panel`	`{ $event: MouseEvent, namePanel: Panel["name"] }`	Испускается, когда действие изменения размера выходит за границы панели.

Expose

Компонент Split экспонирует следующие методы и состояния через ref:

Expose	Value	Description
`resizableGroup`	`HTMLElement` или `undefined`	Ссылка на элемент контейнера изменяемой группы.
`resizablePanels`	`Record<string, HTMLElement>`	Ссылки на отдельные элементы изменяемых панелей.
`sizePanels`	`Record<Panel["name"], number>`	Текущие размеры панелей.
`cursorPanels`	`Record<Panel["name"], CursorType>`	Текущий тип курсора для изменения размера панелей.
`activeCursorPanel`	`CursorType`	Тип курсора, активный во время изменения размера.
`units`	`SplitProps["units"]`	Единицы измерения, используемые для размеров панелей (`percentages` или `pixels`).
`panels`	`SplitProps["panels"]`	Конфигурация всех панелей в компоненте Split.
`direction`	`SplitProps["direction"]`	Направление изменения размера панелей (`vertical` или `horizontal`).
`separatorType`	`SplitProps["separatorType"]`	Тип разделителя, используемого между панелями.
`separatorNotHoverOpacity`	`SplitProps["separatorNotHoverOpacity"]`	Указывает, имеет ли разделитель уменьшенную прозрачность, когда не наведен.
`styles`	`SplitProps["styles"]`	Стили, применяемые к компоненту Split.
`classBase`	`StyleClass`	Базовый CSS класс для компонента Split.

Типы

Panel

Определяет конфигурацию для одной панели в компоненте Split.

Property	Type	Description
`name`	`string`	Имя панели.
`size`	`Size` или `undefined`	Начальный размер панели.
`maxSize`	`Size` или `undefined`	Максимальный размер панели.
`minSize`	`Size` или `undefined`	Минимальный размер панели.
`disabled`	`boolean` или `undefined`	Отключает изменение размера для панели.
`class`	`StyleClass` или `undefined`	Пользовательский CSS класс для контейнера панели.
`[key: string]`	`any`	Любые дополнительные свойства для элемента разделителя.

ISplitStyles

Определяет пользовательские стили для компонента Split.

Property	Type	Description
`panel`	`StyleClass`	Пользовательский CSS класс для элементов панели.

Тип Size представляет значение размера для панелей в компоненте Split. Он определен как number и может представлять размеры в процентах или пикселях, в зависимости от свойства units компонента Split.

Type	Description
`number`	Числовое значение, представляющее размер панели. Интерпретация (проценты или пиксели) зависит от свойства `units`.