Splitter
Отображает разделитель содержимого на странице
Используется для разделения содержимого страницы на две области переменных размер ов. Размеры областей определяются программно или вручную — с помощью ползунка. Реализует разделение по горизонтали или вертикали. Позволяет задавать минимальный размер областей в процентах или пикселях. Указание единиц измерения (%, px) является обязательнымм.
<Splitter InitialPrimarySize="70%">
<Text Value="Left" />
<Splitter Mode="Vertical" InitialPrimarySize="70px">
<Text Value="Top right" />
<Text Value="Bottom right" />
</Splitter>
<Text Value="Right" />
</Splitter>
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возможные значения |
|---|---|---|---|---|
| Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
| CSS | Массив строк-классов CSS-стилей компонента | array | ||
| ChildrenOrder | Порядок дочерних элементов | enum | Normal | Normal - Прямой порядокReverse - Обратный порядок |
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| Hint | Всплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текста | any | ||
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| InitialPrimarySize | Размер первой области (в процентах или пикселях) по умолчанию | string | 50% | |
| MinPrimarySize | Минимальный размер (в процентах или пикселях) первой области | string | 0% | |
| MinSecondarySize | Минимальный размер (в процентах или пикселях) второй области | string | 0% | |
| Mode | Ориентация разделителя | enum | Horizontal | Horizontal - Горизонтальный разделительVertical - Вертикальный разделитель |
| OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
| OnKeyDown | Обработчик события KeyDown | undefined | ||
| OnKeyUp | Обработчик события KeyUp | undefined | ||
| OnMouseDown | Обработчик события MouseDown | undefined | ||
| OnMouseEnter | Обработчик события MouseEnter | undefined | ||
| OnMouseLeave | Обработчик события MouseLeave | undefined | ||
| OnMouseMove | Обработчик события MouseMove | undefined | ||
| OnMouseOut | Обработчик события MouseOut | undefined | ||
| OnMouseOver | Обработчик события MouseOver | undefined | ||
| OnMouseUp | Обработчик события MouseUp | undefined | ||
| OnUnmount | Обработчик события Unmount | undefined | ||
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| State | Ширина разделителя | enum | Main | Main - 4 pxAdditional - 2 px |
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True |
Примеры
JSX:
<Group Width="400px" Height="400px">
<Splitter InitialPrimarySize="70%">
<Text Value="Left" />
<Splitter InitialPrimarySize="70px" Mode="Vertical">
<Text Value="Top right" />
<Text Value="Bottom right" />
</Splitter>
<Text Value="Right" />
</Splitter>
</Group>