Поддерживаемые свойства USS

В этом разделе перечислены поддерживаемые свойства USS и их допустимые значения.

Типы данных USS

Типы данных USS определяют значения и ключевые слова, принимаемые свойствами USS.

Свойства	Описание
<length>	Представляет значение расстояния.
<number>	Represents either an integer or a number with a fractional component.
<integer>	Представляет целое число.
<color>	Представляет цвет. Вы можете определить цвет с помощью кода #шестнадцатеричный, rgb() или rgba( ) или ключевое слово цвета (например, синий или прозрачный).
<resource>	Представляет ресурс в папке Resources.
<url>	Представляет ресурс, указанный путем. Он может быть выражен либо как относительный путь, либо как абсолютный путь.

USS syntax

UI Toolkit style properties use the same grammar syntax as W3C CSS documents:

• Значения ключевых слов отображаются без изменений. Например: авто, базовый уровень.
• Основные типы данных указаны между угловыми скобками ( < и >). Например: <length>, <color>.
• Нетерминалы с тем же именем, что и у свойства, отображаются между угловыми скобками и одинарными прямыми кавычками ( <' и '> ). Например, <'width'>.

Если значение свойства состоит из нескольких компонентов:

• Смежные слова означают, что все они должны встречаться в заданном порядке.
• Черта (|) разделяет две или более альтернатив: должна встречаться ровно одна.
• Двойная черта (||) разделяет два или более вариантов: один или несколько должны встречаться в любом порядке.
• Двойной амперсанд (&&) разделяет два или более компонентов, которые должны встречаться в любом порядке.
• Квадратные скобки ([ ]) обозначают группировку.

За каждым типом, ключевым словом или группой в угловых скобках могут следовать модификаторы:

• звездочка (*) указывает на то, что предыдущий тип, слово или группа встречаются ноль или более раз.
• плюс (+) указывает, что предыдущий тип, слово или группа встречаются один или несколько раз.
• знак вопроса (?) указывает на то, что предыдущий тип, слово или группа являются необязательными.
• пара чисел в фигурных скобках ({A,B}) указывает, что предшествующий тип, слово или группа встречаются по крайней мере A и не более B раз.

Унаследованные свойства

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

css :root { -unity-font: resource("Font/consola.ttf"); }

Следующие свойства наследуются:

• color
• font-size
• unity-font
• unity-font-style
• unity-text-align
• visibility
• whitespace

Коробчатая модель

Размеры

width: <length> | auto height: <length> | auto min-width: <length> | auto min-height: <length> | auto max-width: <length> | none max-height: <length> | none

Параметры width и height определяют размер элемента. Если width не указан, ширина основывается на ширине содержимого элемента. Если height не указан, высота основывается на высоте содержимого элемента.

Поля

margin-left: <length> | auto; margin-top: <length> | auto margin-right: <length> | auto margin-bottom: <length> | auto

Строка

margin: [<length> | auto]{1,4}

Параметры сокращения margin применяются следующим образом:

Вариант	Описание
1 length	Применяется ко всем четырем полям.
2 lengths	Первый применяется к margin-top и margin-bottom. Второй применяется к margin-left и margin-right.
3 lengths	Первый применяется к margin-top. Второй применяется к margin-left и margin-right. Третий применяется к margin-bottom.
4 lengths	Длины применяются в следующем порядке: margin-top, margin-right, margin- снизу, поле слева

Границы

border-left-width: <length> border-top-width: <length> border-right-width: <length> border-bottom-width: <length>

Стенография

border-width: <length>{1,4}

Параметры сокращения border-width применяются следующим образом:

Вариант	Описание
1 length	Применяется ко всем четырем значениям ширины границ.
2 lengths	Первый применяется к border-top-width и border-bottom-width. Второй применяется к border-left-width и border-right-width.
3 lengths	Первый применяется к border-top-width. Второй применяется к border-left-width и border-right-width. Третий применяется к border-bottom-width.
4 lengths	Длины применяются в следующем порядке: border-top-width, border-right-width, border-bottom-width, border-left-width

Padding

padding-left: <length> padding-top: <length> padding-right: <length> padding-bottom: <length>

Стенография

padding: <length>{1,4}

Параметры сокращения padding применяются следующим образом:

Вариант	Описание
1 length	Применяется ко всем четырем прокладкам.
2 lengths	Первый применяется к padding-top и padding-bottom. Второй применяется к padding-left и padding-right.
3 lengths	Первый применяется к padding-top. Второй применяется к padding-left и padding-right. Третий применяется к padding-bottom.
4 lengths	Длины применяются в следующем порядке: padding-top, padding-right, padding- bottom, padding-left

Гибкий макет

В этом разделе перечислены свойства для размещения визуальных элементов. UI(пользовательский интерфейс) Позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. в Словарь Набор инструментов включает механизм макета, который размещает визуальные элементы на основе свойств макета и стиля. Механизм компоновки реализует подмножество Flexbox, системы компоновки HTML/CSS.

По умолчанию все элементы размещаются вертикально в своем контейнере.

Предметы

flex-grow: <number> flex-shrink: <number> flex-basis: <length> | auto flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] align-self: auto | flex-start | flex-end | center | stretch

Контейнеры

flex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap | wrap | wrap-reverse align-content: flex-start | flex-end | center | stretch align-items: flex-start | flex-end | center | stretch justify-content: flex-start | flex-end | center | space-between | space-around

Относительное и абсолютное позиционирование

Позиционирование

position: absolute | relative

This property is set to relative by default, which positions the element based on its parent. If this property is set to absolute, the element leaves its parent layout and values are specified based on the parent bounds.

Position

left: <length> | auto top: <length> | auto right: <length> | auto bottom: <length> | auto

Расстояние от родительского края или исходного положения элемента.

Свойства чертежа

Свойства рисунка задают фон, границы и внешний вид визуального элемента.

Фон

background-color: <color> background-image: <resource> | <url> | none -unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit -unity-background-image-tint-color: <color>

Нарезка

При назначении фонового изображения его можно нарисовать с учетом упрощенной спецификации 9-фрагментов:

-unity-slice-left: <integer> -unity-slice-top: <integer> -unity-slice-right: <integer> -unity-slice-bottom: <integer>

Borders

border-color: <color> border-top-left-radius: <length> border-top-right-radius: <length> border-bottom-left-radius: <length> border-bottom-right-radius: <length>

Стенография

border-radius: <length>{1,4}

Параметры сокращения border-radius применяются следующим образом:

Вариант	Описание
1 length	Применяется ко всем четырем свойствам border-radius.
2 lengths	Первый применяется к border-top-left-radius и border-bottom-right-radius. Второй применяется к border-bottom-left-radius и border-top-right-radius.
3 lengths	Первый применяется к border-top-left-radius. Второй применяется к border-bottom-left-radius и border-top-right-radius. Третий применяется к border-bottom-right-radius.
4 lengths	Длины применяются в этом порядке: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Appearance

overflow: hidden | visible -unity-overflow-clip-box: padding-box | content-box opacity: <number> visibility: visible | hidden display: flex | none

Значением по умолчанию display является flex. Установка для display значения none удаляет элемент. Установка для видимости значения hidden скрывает элемент, но он по-прежнему занимает место в макете.

-unity-overflow-clip-box определяет прямоугольник отсечения содержимого элемента. По умолчанию используется padding-box, прямоугольник за пределами области заполнения (зеленый прямоугольник на изображении блочной модели выше); content-box представляет значение внутри области заполнения (синий прямоугольник на изображении блочной модели выше).

Свойства текста

Свойства текста задают цвет, шрифт, размер шрифта и особые свойства Unity для ресурса шрифта, стиля шрифта, выравнивания, переноса слов и отсечения.

color: <color> -unity-font: <resource> | <url> font-size: <number> -unity-font-style: normal | italic | bold | bold-and-italic -unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right white-space: normal | nowrap

Свойство курсора

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

cursor: [ [ <resource> | <url> ] [ <integer> <integer>]? , ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]