Виджет "Вкладка" позволяет распределить содержимое мэшапа по отдельным видам. Каждый вид является вкладкой с меткой, которую можно определить с помощью свойств виджета. Во время выполнения каждый раз открывается только одна вкладка, а текущая вкладка подсвечивается с помощью подчеркивания. Виджет "Вкладки" является адаптивным виджетом, размер которого растет и уменьшается на основе размера его контейнера. Можно задать для виджета фиксированную ширину или высоту, управляя размерами контейнера или с помощью свойств Width и Height виджета.

Сконфигурировать виджет можно следующими способами:

По умолчанию все вкладки виджета загружаются при открытии мэшапа. Сервисы, привязанные к виджету на вкладке, выполняются, когда события, такие как событие Loaded мэшапа, инициируются во время выполнения. Выполнение сервисов и загрузка виджетов на фоновых вкладках может понизить быстродействие, если виджет "Вкладки" содержит несколько сложных визуализаций, включающих большой набор виджетов. Можно настроить отложенную загрузку для отсрочки загрузки невидимых вкладок до тех пор, пока они не понадобятся во время выполнения, что повышает быстродействие мэшапа и сети. При конфигурировании отложенной загрузки в виджете не забудьте исключить вкладку по умолчанию из отложенной загрузки, потому что она отображается мгновенно при открытии мэшапа. Чтобы включить отложенную загрузку для вкладки в виджете, выполните следующие шаги:

Во время выполнения вкладки с отложенной загрузкой автоматически загружаются при открытии вкладки. Если свойство EnableContainerUnload включено для контейнера вкладок, контейнер, когда он не является видимым, автоматически выгружается для освобождения системных ресурсов и повышения производительности. При переключении на незагруженную вкладку вкладка автоматически загружается заново. Можно создать дополнительные привязки к сервисам отложенной загрузки вкладки, чтобы вручную загружать и выгружать содержимое с помощью других событий в мэшапе, например события Clicked виджета "Кнопка".

Можно сконфигурировать стиль вкладки с помощью свойства виджета TabStyle. Это свойство поддерживает две опции:

Frameless - имена вкладок отображаются без границ. (По умолчанию.)

Framed - отображается граница вокруг имени вкладки и области содержимого. Используйте свойство HideContentAreaBorder, чтобы управлять видимостью границы вокруг области содержимого.

При использовании вкладок в кадре можно настроить внешний вид имен вкладок с помощью свойства TabMode. Имена вкладок могут содержать метку, значок или и то и другое в зависимости от содержимого и среды пользователя, которую требуется предоставить. Для каждой вкладки можно определить текстовую метку, указать ссылку на медиаобъект или указать SVG-значок.

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

На следующем изображении показаны вкладки только со значками. Значки помогают пользователям быстро определять назначение каждой вкладки, особенно в условиях ограниченного экранного пространства.

Чтобы настроить размер значка, используйте свойство виджета TabIconSize.

При использовании вкладок в кадре можно сконфигурировать виджет для отображения вкладок по горизонтали или вертикали с помощью свойства TabsPosition. Вкладки могут отображаться по горизонтали сверху или снизу либо по вертикали слева или справа от области содержимого. Чтобы использовать вертикальные вкладки, выполните следующие шаги.

В следующем примере показан стиль в кадре с вкладками, выровненными по вертикали и по левому краю.

По умолчанию вкладки настраиваются на увеличение или сжатие в соответствии с содержимым наименования вкладки в зависимости от наличия свободного места. Используйте свойство TabWdithConfig, чтобы равномерно распределить доступное пространство по всем вкладкам или задать фиксированную ширину. Равномерное распределение поддерживается только при горизонтальном отображении вкладок.