UIElements开发人员指南12 USS supported properties(USS 支持的类型)

USS支持的属性

本主题列出了支持的USS属性及其接受的值。

USS数据类型

USS数据类型定义USS属性接受的值和关键字。

属性	描述
<length>	表示距离值。
<number>	表示整数或带小数分量的数字。
<integer>	代表整数。
<color>	代表颜色。可以使用#hexadecimal代码、rgb()，或来rgba()定义颜色。颜色关键字例如blue或transparent不受支持。
<resource>	表示Resources文件夹中的资产。
<url>	表示路径指定的资产。它可以表示为相对路径或绝对路径。

USS语法

UIElements样式属性使用与W3C CSS文档相同的语法语法：

• 关键字值按原样显示。例如：auto，baseline。
• 基本数据类型出现在尖括号（<和>）之间。例如：<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长度	适用于所有四个边距。
2个长度	第一个适用于margin-top和margin-bottom。第二个适用于margin-left和margin-right。
3个长度	第一个适用于margin-top。第二个适用于margin-left和margin-right。第三个适用于margin-bottom。
4个长度	长度的顺序施加：margin-top，margin-right，margin-bottom，margin-left

边框

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

简写

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

该border-width速记选项应用如下：

选项	描述
1长度	适用于所有四个边框宽度。
2个长度	第一个适用于border-top-width和border-bottom-width。第二个适用于border-left-width和border-right-width。
3个长度	第一个适用于border-top-width。第二个适用于border-left-width和border-right-width。第三个适用于border-bottom-width。
4个长度	长度的顺序施加：border-top-width，border-right-width，border-bottom-width，border-left-width

填充

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

简写

padding: <length>{1,4}

该padding速记选项应用如下：

选项	描述
1长度	适用于所有四个填充物。
2个长度	第一个适用于padding-top和padding-bottom。第二个适用于padding-left和padding-right。
3个长度	第一个适用于padding-top。第二个适用于padding-left和padding-right。第三个适用于padding-bottom。
4个长度	长度的顺序施加：padding-top，padding-right，padding-bottom，padding-left

Flex布局

本节列出了定位可视元素的属性。UIElements包括一个布局引擎，可根据布局和样式属性定位视觉元素。布局引擎实现了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

relative默认情况下，此属性设置为基于其父元素定位元素。如果将此属性设置为absolute，则元素将保留其父布局，并根据父边界指定值。

位置

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>

边界

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长度	适用于所有四个边界半径属性。
2个长度	第一个适用于border-top-left-radius和border-bottom-right-radius。第二个适用于border-bottom-left-radius和border-top-right-radius
3个长度	第一个适用于border-top-left-radius。第二个适用于border-bottom-left-radius和border-top-right-radius。第三个适用于border-bottom-right-radius。
4个长度	长度的顺序施加：border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius

表现

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

该display默认值是flex。设置display以none删除元素。设置visibility为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 ]