Unity 6.3
0 онлайн 77 гостей 3 в системе
Вход
← Руководство

TabView

Вы можете группировать несколько элементов Вкладка в элементе TabView для создания навигационной системы, основанной на вкладках.

Создать TabView

Вы можете создать TabView с UI Builder, UXML или C#.

Чтобы создать TabView с C#, создайте новый экземпляр объекта TabView и добавьте в него элементы Tab. Например:

var tabView = new TabView("Title text");
var tab1 = new Tab("Tab 1");
var tab2 = new Tab("Tab 2");
var tab3 = new Tab("Tab 3");
tabView.Add(tab1);
tabView.Add(tab2);
tabView.Add(tab3);

Сделать вкладки изменяемыми

Чтобы изменить порядок вкладок с помощью TabView, установите свойство reorderable на true.

Чтобы сохранить порядок вкладок для TabView в Редакторе UI, назначьте уникальный view-data-key как TabView, так и содержащимся в нем элементам Tab. view-data-key хранит состояние вкладок. Если вы оставили view-data-key пустым, состояние вкладок не сохраняется при перезагрузке документа. Подробнее см. в Постоянство просмотра данных.

Примеры

Следующий пример 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# класс: TabView
Пространство имен: UnityEngine.UIElements
Базовый класс: VisualElement

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

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

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

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

Унаследованные атрибуты 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-view Имя USS-класса для элементов этого типа.
contentContainerUssClassName .unity-tab-view__content-container Имя USS-класса для контейнера содержимого этого типа.
reorderableUssClassName .unity-tab-view__reorderable Имя USS-класса для представления вкладок с переупорядочиванием.
verticalUssClassName .unity-tab-view__vertical Имя USS-класса для вертикального представления вкладок.
viewportUssClassName .unity-tab-view__content-viewport Имя USS-класса для области просмотра содержимого этого типа.
nextButtonUssClassName .unity-tab-view__next-button Имя USS-класса для кнопки прокрутки вперёд этого типа.
previousButtonUssClassName .unity-tab-view__previous-button Имя USS-класса для кнопки прокрутки назад этого типа.
disabledUssClassName .unity-disabled Имя USS-класса для локально отключённых элементов.

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

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

  • Вкладка
  • 📺 Видео: UI Toolkit Серия уроков: Меню вкладок