Перейти к основному содержимому

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Порядок дочерних элементовenumNormalNormal - Прямой порядок
Reverse - Обратный порядок
CombineConfigКонфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм.
Не рекомендуется указывать значение вручную
object
HiddenПризнак состояния компонента СкрытbooleanFalse
HintВсплывающая подсказка над компонентом, чаще используемая для подробного пояснения краткого текстаany
IdИдентификатор компонента для навигации к нему на HTML-страницеstring
InitialPrimarySizeРазмер первой области (в процентах или пикселях) по умолчаниюstring50%
MinPrimarySizeМинимальный размер (в процентах или пикселях) первой областиstring0%
MinSecondarySizeМинимальный размер (в процентах или пикселях) второй областиstring0%
ModeОриентация разделителяenumHorizontalHorizontal - Горизонтальный разделитель
Vertical - Вертикальный разделитель
OnClickОбработчик события нажатия кнопки мышиundefined
OnKeyDownОбработчик события KeyDownundefined
OnKeyUpОбработчик события KeyUpundefined
OnMouseDownОбработчик события MouseDownundefined
OnMouseEnterОбработчик события MouseEnterundefined
OnMouseLeaveОбработчик события MouseLeaveundefined
OnMouseMoveОбработчик события MouseMoveundefined
OnMouseOutОбработчик события MouseOutundefined
OnMouseOverОбработчик события MouseOverundefined
OnMouseUpОбработчик события MouseUpundefined
OnUnmountОбработчик события Unmountundefined
SlotМетка для динамического добавления другого компонента по его идентификаторуstring
StateШирина разделителяenumMainMain - 4 px
Additional - 2 px
TooltipВсплывающая подсказка над компонентом, чаще используемая для пояснения назначения значкаany
TraceId
Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности:
создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента
string
VisibleПризнак инверсии состояния компонента СкрытbooleanTrue

Примеры

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>