USS общие свойства

На этой странице представлены общие свойства USS, их синтаксис и приемлемые значения, а также различия от CSS. Полный список свойств USS см. в USS свойствах ссылка.

Все

Свойство all возвращает все свойства к их значениям по умолчанию. Это свойство не применяется к пользовательским свойствам USS.

all: initial

Модель коробки

Размеры

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

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

Соотношение сторон — это соотношение ширины элемента к его высоте. Вы можете указать соотношение сторон как число с плавающей запятой (например, 1.777778 для 16/9) или установить его на auto, чтобы сохранить первоначальное соотношение сторон.

Когда вы устанавливаете другие свойства размера для элемента, такие как width, height, min-width, или max-height, aspect-ratio свойство работает вместе с этими свойствами. Например, если вы установите height: 200px на изображении и применить соотношение сторон 3/4, ширина изображения становится 150px Если вы явно устанавливаете оба параметра, width и height, эти значения переопределяют соотношение сторон.

Чтобы убедиться, что ваш элемент сохраняет соотношение независимо от содержания внутри, вы можете установить overflow на hidden.

Примечание: Элементы, размер которых определен с помощью соотношения сторон, могут выглядеть по-разному на мобильных устройствах с портретным форматом, поскольку ширина экрана устройства может не соответствовать пропорциональной высоте соотношения сторон. Рекомендуемая наилучшая практика заключается в настройке значений соотношения сторон или других параметров размера на точках останова для достижения желаемого макета. Например, установите широкоэкранное соотношение сторон на изображении для более крупных точек останова и квадратное соотношение сторон на том же изображении для мобильных точек останова.

Соотношение сторон эквивалентно свойству aspect-ratio CSS. Дополнительные сведения см. в документации MDN.

Разница

margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
/* Shorthand */
margin: [<length> | auto]{1,4}

Границы

border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
/* Shorthand */
border-width: <length>{1,4}

Заполнение

padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
/* Shorthand */
padding: <length>{1,4}

Отличия от CSS

Альтернативная модель блока, которую использует USS, отличается от стандартной модели блока CSS. В стандартной модели блока CSS width и height определяют размер блока содержимого. Размер элемента, отображаемый на экране, является суммой его значений padding, border-widthи width / height.

Модель Unity эквивалентна установке свойства CSS box-sizing на border-box. Подробнее см. в документации MDN.

Гибкий макет

UI Toolkit включает движок макета расположения визуальных элементов на основе свойств макета и стиля. Двигатель макета реализует подмножество Flexbox, HTML/CSS система макета.

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

/* Items */
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

/* Containers */
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch

/* The default value is `stretch`.
`auto` sets `align-items` to `flex-end`. */
align-items: auto | flex-start | flex-end | center | stretch

justify-content: flex-start | flex-end | center | space-between | space-around

Размещение

/* The default value is `relative` which positions the element based on its parent.
If sets to `absolute`, the element leaves its parent layout and values are specified based on the parent bounds.*/
position: absolute | relative

/* The distance from the parent edge or the original position of the element. */
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto

1. Справочная информация

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>
-unity-slice-scale: <length>
-unity-slice-type: sliced | tiled

Примечание: Для спрайтов Unity регулирует -unity-slice-scale на значение pixels-per-unit спрайта по отношению к значению reference sprite pixels per unit valueпанели, которое по умолчанию 100. Например, если pixels-per-unit спрайта равняется 16, масштаб регулируется 16/100 = 0.16. Поэтому, если вы установите масштаб на 2px, окончательный масштаб будет 2px * 0.16px = 0.32px. Для текстур и векторных изображений Unity не производит дополнительных настроек на заданные вами значения масштаба фрагмента.

Для получения дополнительной информации о 9-слой, см. Изображения 9-Slice с UI Toolkit.

Цвет границы

border-left-color: <color>
border-top-color: <color>
border-right-color: <color>
border-bottom-color: <color>
/* Shorthand */
border-color: <color>{1,4}

Радиус границы

border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
/* Shorthand */
border-radius: <length>{1,4}

Отличия от CSS

Свойства радиуса границы работают почти одинаково в USS и CSS. Для подробной информации о border-radius, см. документацию MDN.

Однако основные различия заключаются в следующем:

• Unity не поддерживает сокращение второго радиуса (border-radius: (first radius values) / (second radius values);), используемое для создания эллиптических углов.
• Unity уменьшает значения радиуса границы до половины размера элемента в пикселях. Например, для элемента размером 100px x 100px любое значение border-radius больше 50px уменьшается до 50px. Если вы используете значения процента (%) для свойств радиуса границы, Unity сначала разрешает процент в пикселях, а затем уменьшает значение border-radius до половины разрешенного значения пикселя. Если у вас разные значения радиуса для двух или более углов, Unity уменьшает любые значения больше половины размера элемента до половины размера элемента.
• Если ширина и высота элемента не равны, или если зажим происходит по одной оси, радиус границы может быть неравномерным, что приведет к эллиптическому округлению угла.

Внешний вид

overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
visibility: visible | hidden
display: flex | none

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

Значение display по умолчанию — flex. Задайте для display значение none, чтобы удалить элемент из UI. Задайте для visibility значение hidden, чтобы скрыть элемент; при этом он по-прежнему занимает место в компоновке.

Свойство overflow управляет обрезкой содержимого элемента. Значение по умолчанию visible, что означает, что содержимое элемента не обрезается до границ элемента. Если вы установите overflow до hidden, содержимое элемента обрезается до границ элемента. Вы можете использовать overflow до для создания эффекта маскировки.

Отличия от CSS

Свойство USS display поддерживает только небольшое подмножество доступных значений ключевых слов свойства CSS display. Версия USS поддерживает ключевые слова, работающие с движком макета Yoga.

• Более подробную информацию о Йоге см. в Гибкие макеты с Йогой.
• Дополнительные сведения о свойстве CSS display см. в документации по MDN.

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

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

color: <color>
-unity-font: <resource> | <url>
-unity-font-definition: <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
-unity-text-overflow-position: start | middle | end
white-space: normal | nowrap | pre | pre-wrap

-unity-text-outline-width: <length>
-unity-text-outline-color: <color>
/* Shorthand */
-unity-text-outline: <length> | <color>

-unity-text-generator: standard | advanced
-unity-text-auto-size: none | best-fit <min-font-size> <max-font-size>

/* The text overflow mode. */
/* clip: Trims any text that extends beyond the boudaries of its container. */
/* ellipsis: Truncates any text that extends beyong the boudaries of its container with an ellipsis. */
text-overflow: clip | ellipsis

text-shadow: <x-offset> <y-offset> <blur-radius> <color>;

letter-spacing: <length>
word-spacing: <length>
-unity-paragraph-spacing: <length>

Примечание: При настройке шрифта в UI Builder, Фон в Inspector устанавливает -unity-font, а Font Asset устанавливает -unity-font-definition. Поскольку -unity-font-definition имеет приоритет над -unity-font, для использования шрифта из списка Фон, выберите Нет из Font Asset. В противном случае выбранный вами шрифт не будет применяться.

Более подробную информацию о тени и контуре текста см. в Текстовые эффекты.

Более подробную информацию о генераторе текста и автоматическом размере см. в Расширенный генератор текста.

Курсор

Свойство 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 ]

Примечание: Ключевые слова курсора доступны только в Редакторе UI. Ключевые слова курсора не работают во время выполнения UI. Во время выполнения UI, вы должны использовать текстуру для пользовательских курсоров.

Отличия от CSS

В CSS вы можете указать несколько дополнительных пользовательских курсоров и обязательное ключевое слово в одном заявлении стиля cursor. Когда вы указываете несколько курсоров, они образуют резервную цепочку. Если браузер не может загрузить первый пользовательский курсор, он пытается загрузить каждый из остальных курсоров последовательно, пока не загрузится один из них или не останется больше пользовательских курсоров, которые можно попробовать. Если браузер не может загрузить никаких пользовательских курсоров, он использует ключевое слово.

В USS пользовательские курсоры и ключевые слова взаимно исключают друг друга. Объявление стиля cursor может иметь только один пользовательский курсор или одно ключевое слово.

Подробную информацию о свойстве CSS cursor см. в документации MDN.

Непрозрачность

opacity: <number>

Отличия от CSS

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

В следующем примере USS, синий квадрат является ребенком красного квадрата. Красный квадрат имеет opacity из 0.5.

.red {
    background-color: red;
    opacity: 0.5;
}

.blue {
    background-color: blue;
    left: 20px;
    top: 20px;
}

Хотя синий квадрат не имеет значения непрозрачности, он имеет воспринимаемую непрозрачность 0.5 от красного квадрата. Вы можете видеть красный квадрат через синий квадрат.

В CSS, если вы применяете один и тот же стиль, красный и синий квадраты прозрачны на 50%. Однако, вы не можете увидеть красный квадрат через синий квадрат, если вы также не установите opacity синего меньше 1.

Материал

-unity-material: <resource> | <url> | none

Свойство -unity-material назначает элементу пользовательский материал. Дополнительные сведения см. в Начало работы с UI Shader Graph.

Примечание: это свойство автоматически наследуется дочерними элементами, то есть они используют тот же материал, но могут его переопределить.

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

• USS преобразование
• USS переходный период
• USS фильтр
• USS ссылка на свойства