Unity 6.3
0 онлайн 101 гостей 3 в системе
Вход
← UI системы Шаг 87 из 317

Вкладка

Элемент Tab представляет собой одну вкладку в TabView. В окне или меню вы можете использовать вкладку для группирования связанного контента.

Сделать вкладку закрываемой

Чтобы Вкладка могла быть закрыта, установите свойство closable на true. Когда Вкладка может быть закрыта, на Вкладке появляется значок закрытия. Если пользователь выбирает значок закрытия, Вкладка закрывается.

Добавить значок к вкладке

Вы можете добавить значок к своей вкладке, чтобы сделать ее более визуально привлекательной. Значки могут быть изображениями, которые существуют в вашем проекте, такими как Текстура, Текстура отображения, Спрайт или Вектор. Информацию о том, как ссылаться на изображение, см. Активы.

Чтобы добавить значок на Вкладку с UI Builder, выполните одно из следующих действий:

  • На панели Inspector вкладки выберите значок из раскрывающегося списка Icon Image.
  • Перетащите значок из окна Assets в поле Icon Image, расположенное в панели Inspector вкладки.

Чтобы добавить значок для Вкладки с UXML, добавьте источник изображения к атрибуту icon-image:

<ui:Tab name="Tab" label="Tab text" icon-image="/path/to/image-file.png" />

Чтобы добавить значок для Вкладки с C#, назначьте источник изображения свойству iconImage:

Tab myTab = new Tab("Tab text");
var TabIconImage = Resources.Load<Texture2D>("image-file");

myTab.iconImage = TabIconImage;

Примеры

Следующий пример UXML создает TabView с табами:

<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <TabView>
       <Tab label="UXML Tab A">
           <Label text="UXML tab: This is some content for the first Tab." />
       </Tab>
       <Tab label="UXML Tab B">
           <Label text="UXML tab: This is some content for the second Tab." />
       </Tab>
    </TabView>
</UXML>

Следующий пример USS стилизует TabView:

.some-styled-class .unity-tab__header {
    -unity-font-style: bold-and-italic;
}

.some-styled-class .unity-tab__header:checked > .unity-tab__header-underline {
    background-color: #46607C;
}

.some-styled-class .unity-tab__content-container {
    padding: 16px;
}

Следующий пример C# иллюстрирует некоторые из настраиваемых функций TabView и его Вкладок:

// Create a TabView with Tabs that only contains a label.
var csharpTabViewWithLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabOne = new Tab("One");
tabOne.Add(new Label("Tab with labels only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabOne);
var tabTwo = new Tab("Two");
tabTwo.Add(new Label("Tab with labels only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithLabels.Add(tabTwo);
container.Add(csharpTabViewWithLabels);

// Create a TabView with Tabs that only contains an icon.
var csharpTabViewWithIcons = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabIconConnect = new Tab(EditorGUIUtility.FindTexture("CloudConnect"));
tabIconConnect.Add(new Label("Tab with icons only: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconConnect);
var tabIconStore = new Tab(EditorGUIUtility.FindTexture("Asset Store"));
tabIconStore.Add(new Label("Tab with icons only: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIcons.Add(tabIconStore);
container.Add(csharpTabViewWithIcons);

// Create a TabView with Tabs that only contains an icon and a label.
var csharpTabViewWithIconsAndLabels = new TabView() { style = { marginTop = 15 } }; // marginTop not required, only for demonstration purposes.
var tabConnect = new Tab("Connect", EditorGUIUtility.FindTexture("CloudConnect"));
tabConnect.Add(new Label("Tab with an icon and a labels: This is some content for the first Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabConnect);
var tabStore = new Tab("Store", EditorGUIUtility.FindTexture("Asset Store"));
tabStore.Add(new Label("Tab with an icon and a labels: This is some content for the second Tab.") { style = { marginTop = 10 } });
csharpTabViewWithIconsAndLabels.Add(tabStore);
container.Add(csharpTabViewWithIconsAndLabels);

// Create a TabView that allows re-ordering of the tabs.
var csharpReorderableTabView = new TabView() { reorderable = true, style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var tabA = new Tab("Tab A");
tabA.Add(new Label("Reorderable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabA);
var tabB = new Tab("Tab B");
tabB.Add(new Label("Reorderable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabB);
var tabC = new Tab("Tab C");
tabC.Add(new Label("Reorderable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
csharpReorderableTabView.Add(tabC);
container.Add(csharpReorderableTabView);

// Create a TabView with closeable tabs.
var closeTabInfoLabel = new Label($"Last tab closed: None");
void UpdateLabel(string newLabel) => closeTabInfoLabel.text = $"Last tab closed: {newLabel}";
var cSharpCloseableTabs = new TabView() { style = { marginTop = 10 } }; // marginTop not required, only for demonstration purposes.
var closeableTabA = new Tab("Title A") { closeable = true };
closeableTabA.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabA.Add(new Label("Closeable tabs: This is some content for Tab A") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabA);
var closeableTabB = new Tab("Title B") { closeable = true };
closeableTabB.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabB.Add(new Label("Closeable tabs: This is some content for Tab B") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabB);
var closeableTabC = new Tab("Title C") { closeable = true };
closeableTabC.closed += (tab) => { UpdateLabel(tab.label); };
closeableTabC.Add(new Label("Closeable tabs: This is some content for Tab C") { style = { marginTop = 10 } });
cSharpCloseableTabs.Add(closeableTabC);
container.Add(cSharpCloseableTabs);
container.Add(closeTabInfoLabel);

// Create a TabView and apply custom styling to specific areas of their tabs.
var csharpCustomStyledTabView = new TabView() { style = { marginTop = 15 }, classList = { "some-styled-class" }}; // marginTop not required, only for demonstration purposes.
var customStyledTabOne = new Tab("One");
customStyledTabOne.Add(new Label("Custom styled tabs: This is some content for the first Tab."));
csharpCustomStyledTabView.Add(customStyledTabOne);
var customStyledTabTwo = new Tab("Two");
customStyledTabTwo.Add(new Label("Custom styled tabs: This is some content for the second Tab."));
csharpCustomStyledTabView.Add(customStyledTabTwo);
container.Add(csharpCustomStyledTabView);

Чтобы попробовать этот пример в Unity, перейдите в Окно > UI Toolkit > Образцы.

Дополнительные примеры см. в следующих разделах:

-Создать меню с вкладками.

Базовый класс C# и пространство имён

C# класс: Tab
Пространство имен: UnityEngine.UIElements
Базовый класс: VisualElement

Атрибуты члена UXML

Этот элемент имеет следующие атрибуты члена:

Имя Тип Описание
closeable boolean Свойство, которое добавляет возможность закрытия вкладок.

Значение по умолчанию — false. Установите это значение на true, чтобы разрешить пользователю закрывать вкладки в представлении вкладок.
icon-image Object Устанавливает значок для заголовка вкладки.
label string Устанавливает метку заголовка вкладки.

Унаследованные атрибуты UXML

Этот элемент наследует от своего базового класса следующие атрибуты:

Имя Тип Описание
focusable boolean Если false, то элемент не может быть фокусирован.

Элемент может быть фокусирован только в том случае, если его свойство canGrabFocus имеет значение true.
tabindex int Целое число, используемое для сортировки фокусируемых элементов в кольце фокуса. Должно быть больше или равно нулю.

Установка значения tabIndex меньше 0 (например, −1) удаляет элемент из кольца фокуса и навигации по вкладкам.

Этот элемент также наследует следующие атрибуты от VisualElement:

Имя Тип Описание
content-container string Логический контейнер, в который добавляются дочерние элементы. Если к этому элементу добавляется дочерний элемент, то он добавляется в контейнер содержимого этого элемента.

При итерации над VisualElement.Children При использовании элемента вместо самого элемента используется иерархия контейнера содержимого элемента. Это может привести к неожиданным результатам, например, к игнорированию элементов событиями навигации, если они не находятся непосредственно в иерархической структуре контейнера. См. IFocusRing для больше информации.

Если контейнер содержимого совпадает с самим элементом, то дочерние элементы добавляются непосредственно к элементу. Это верно для большинства элементов, но может быть переопределено более сложными типами.

ScrollView, например, имеет контейнер содержимого, отличающийся от самого себя. В этом случае дочерние элементы, добавленные к представлению прокрутки, добавляются вместо этого к его элементу контейнера содержа-VisualElement.Hierarchy.parent) дочерних элементов является элементом контейнера содержимого прокрутки, их логическим родителем (VisualElement.parentПоскольку некоторые фокусируемые дочерние объекты представления прокрутки не являются частью его логической иерархии, такие как его Scroller элементов, эти фокусируемые дочерние элементы не рассматриваются по умолчанию при использовании последовательной навигации. Как я могу изменить, какой элемент будет фокусироваться дальше для примера решения, если правила навигации по умолчанию не соответствуют вашим потребностям.
data-source Object Назначает источник данных этому VisualElement, который переопределяет любой унаследованный источник данных. Этот источник данных наследуется всеми дочерними объектами.
data-source-path string Путь от источника данных к значению.
data-source-type System.Type Возможный тип источника данных, присваиваемый этому VisualElement.

Эта информация используется UI Builder только как подсказка для определенного заполнения поля пути источника данных, когда эффективный источник данных не может быть указан во время проектирования.
enabled boolean Возвращает true, если VisualElement разрешен локально.

Этот флаг не изменяется, если VisualElement имплицитно отключен одним из родителей. Чтобы проверить это, используйте enabledInHierarchy.
language-direction UIElements.LanguageDirection Указывает направленность текста элемента. Значение будет распространяться на дочерей элемента.

Установка languageDirection на RTL может получить только базовую поддержку RTL, такую как инверсия текста. Чтобы получить более полную поддержку RTL, такую как перерыв строки, перенос слов или формирование текста, вы должны включить Усовершенствованный текстовый генератор.
name string Имя этого VisualElement.

Используйте это свойство для написания селекторов USS, которые нацелены на определенный элемент. Стандартная практика заключается в том, чтобы дать элементу уникальное имя.
picking-mode UIElements.PickingMode Определяет, может ли этот элемент быть целью событий указателя или выбран IPanel.Pick запросов.

Элементы не могут быть выбраны, если:

- Они невидимы. style.display установлен на DisplayStyle.None

Элементы с режимом подбора PickingMode.Ignore никогда не получать псевдо-state.
style string Задает значения стиля на VisualElement.

Возвращаемые данные стиля, рассчитанные из USS файлы или встроенные стили, записанные в этот объект в C#, не представляет полностью разрешенные стили, такие как окончательная высота и ширина VisualElement. Чтобы получить доступ к этим полностью разрешенным стилям, используйте resolvedStyle.



Дополнительные сведения об использовании этого свойства и всех поддерживаемых USS свойства, см. Применить стили в C# сценарии и USS ссылка на свойства страницы руководства.
tooltip string Текст, который будет отображаться внутри информационного поля после того, как пользователь задержится над элементом небольшое время. Это поддерживается только в Редакторе UI.
usage-hints UIElements.UsageHints Комбинация значений подсказки, которые указывают высокоуровневые предполагаемые схемы использования для VisualElement. Это свойство может быть установлено только тогда, когда VisualElement еще не является частью Panel. Как только оно становится частью Panel, это свойство становится эффективно только для чтения, и попытки изменить его будут вызывать исключение. Указание правильного UsageHints заставляет систему принимать более правильные решения о том, как обрабатывать или ускорять определенные операции на основе предполагаемой схемы использования. Обратите внимание, что эти подсказки не влияют на поведение или визуальные результаты, а только влияют на общую производительность панели и элементов внутри нее. Рекомендуется всегда рассматривать возможность указания правильного UsageHints, но помните, что некоторые UsageHints могут быть внутренне проигнорированы при определенных условиях (e.g. из-за аппаратных ограничений на целевой платформе).
view-data-key string Используется для устойчивости данных представления, таких как развернутые состояния дерева, положение прокрутки или уровень масштаба.

Этот ключ используется для сохранения и загрузки данных представления из хранилища данных представления. Если этот ключ не установлен, устойчивость отключена для связанного VisualElement. Дополнительные сведения см. в разделе Устойчивость данных представления в руководстве Unity.

Классы USS

В таблице ниже перечислены все открытые имена свойств C# и связанные с ними селекторы USS.

C# собственность USS выбор Описание
ussClassName .unity-tab Имя USS-класса для элементов этого типа.
tabHeaderUssClassName .unity-tab__header Имя USS-класса для заголовка этого типа.
tabHeaderImageUssClassName .unity-tab__header-image Имя USS-класса для значка внутри заголовка.
tabHeaderEmptyImageUssClassName .unity-tab__header-image--empty Имя USS-класса для значка внутри заголовка, когда значение равно null.
tabHeaderStandaloneImageUssClassName .unity-tab__header-image--standalone Имя USS-класса для значка внутри заголовка, когда метка пуста или равна null.
tabHeaderLabelUssClassName .unity-tab__header-label Имя USS-класса для метки заголовка.
tabHeaderEmptyLabeUssClassName .unity-tab__header-label--empty Имя USS-класса для метки заголовка, когда значение пусто или равно null.
tabHeaderUnderlineUssClassName .unity-tab__header-underline Имя USS-класса для подчёркивания активного состояния заголовка.
contentUssClassName .unity-tab__content-container Имя USS-класса для элемента-контейнера этого типа.
draggingUssClassName .unity-tab--dragging Имя USS-класса для состояния перетаскивания этого типа.
reorderableUssClassName .unity-tab__reorderable Имя USS-класса для переупорядочиваемых элементов вкладок.
reorderableItemHandleUssClassName .unity-tab__reorderable-handle Имя USS-класса для маркера перетаскивания в переупорядочиваемых вкладках.
reorderableItemHandleBarUssClassName .unity-tab__reorderable-handle-bar Имя USS-класса для полосы маркера перетаскивания в переупорядочиваемых вкладках.
closeableUssClassName .unity-tab__header__closeable Имя USS-класса для закрываемой вкладки.
closeButtonUssClassName .unity-tab__close-button Имя USS-класса для кнопки закрытия в закрываемых вкладках.
disabledUssClassName .unity-disabled Имя USS-класса для локально отключённых элементов.

Вы также можете использовать раздел Соответствующие селекторы в отладчике Inspector или UI Toolkit, чтобы увидеть, какие селекторы USS влияют на компоненты VisualElement на каждом уровне его иерархии.

Дополнительные ресурсы

  • TabView
  • 📺 Видео: UI Toolkit Серия уроков: Меню вкладок
← Предыдущий шагSliderInt