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

USS支持的属性

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

USS数据类型

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

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

USS语法

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

  • 关键字值按原样显示。例如:autobaseline
  • 基本数据类型出现在尖括号(<>)之间。例如:<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

widthheight指定了元件的尺寸。如果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-topmargin-bottom。第二个适用于margin-leftmargin-right
3个长度 第一个适用于margin-top。第二个适用于margin-leftmargin-right。第三个适用于margin-bottom
4个长度 长度的顺序施加:margin-topmargin-rightmargin-bottommargin-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-widthborder-bottom-width。第二个适用于border-left-widthborder-right-width
3个长度 第一个适用于border-top-width。第二个适用于border-left-widthborder-right-width。第三个适用于border-bottom-width
4个长度 长度的顺序施加:border-top-widthborder-right-widthborder-bottom-widthborder-left-width

填充

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

简写

padding: <length>{1,4}

padding速记选项应用如下:

选项 描述
1长度 适用于所有四个填充物。
2个长度 第一个适用于padding-toppadding-bottom。第二个适用于padding-leftpadding-right
3个长度 第一个适用于padding-top。第二个适用于padding-leftpadding-right。第三个适用于padding-bottom
4个长度 长度的顺序施加:padding-toppadding-rightpadding-bottompadding-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-radiusborder-bottom-right-radius。第二个适用于border-bottom-left-radiusborder-top-right-radius
3个长度 第一个适用于border-top-left-radius。第二个适用于border-bottom-left-radiusborder-top-right-radius。第三个适用于border-bottom-right-radius
4个长度 长度的顺序施加:border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius

表现

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

display默认值是flex。设置displaynone删除元素。设置visibilityhidden隐藏元素,但元素仍占用布局中的空间。

-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 ]

 

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值