Dota 2 Workshop Tools:zh-cn/Panorama:zh-cn/CSS Properties:zh-cn

From Valve Developer Community
Jump to: navigation, search

Panorama支持HTML5 CSS属性的一个子集,同时也加入了一些自订的CSS属性。在可能的情况下,Panorama都会试图接近W3C的规范,即通过名称来寻找网页上的属性。绝大多数情况下这都是一个很好的方法。


所有最新的Panorama属性都可以通过运“dump_panorama_css_properties”命令来获取。这条命令会打印整个属性列表及其说明。

中文版本的CSS属性集正在持续更新中。

Contents

受支持的伪类选择器

  • :hover - 鼠标悬停于板上。
  • :focus - 板获得键盘聚焦。
  • :active - 板正在被使用(鼠标在板上按下)。
  • :disabled - 板被禁用。
  • :enabled - 板被启用。
  • :inspect - 板正在被debugger检视。
  • :selected - 板被选中(按钮被勾选)。
  • :descendantfocus - 板的某个子板获得了键盘聚焦。
  • :parentdisabled - 板的所属板被禁用,导致板被间接禁用。
  • :layoutloading - panel is in-progress loading it's layout file and thus may want to display specially
  • :layoutfailed - panel failed to load requested layout file, and thus may want to display specially
  • :activationdisabled - 板被禁止激活,但是能仍然能获得聚焦(普通禁用会禁止所有输入/聚焦)。

属性列表

Exported 08/19/2015 using "dump_panorama_css_properties".

-s2-mix-blend-mode

这个功能用来控制板的混合模式。请参见网页上的CSS mix-blend-mode文档,但注意这里的normal模式是带有alpha(透明度)的混合的。

几个例子:
-s2-mix-blend-mode: normal;
-s2-mix-blend-mode: multiply;
-s2-mix-blend-mode: screen;


排列

<内容暂缺>


动画

<内容暂缺>


动画延迟

<内容暂缺>


动画方向

<内容暂缺>


动画持续时间

<内容暂缺>


动画循环计数

<内容暂缺>


动画命名

<内容暂缺>


动画计时功能

<内容暂缺>


背景颜色

将板的背景背景设置为填充颜色/渐变/结合。

几个例子:
background-color: #FFFFFFFF;
background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), to( #c0c0c0c0 ) );
background-color: gradient( linear, 0% 0%, 0% 100%, from( #fbfbfbff ), color-stop( 0.3, #ebebebff ), to( #c0c0c0c0 ) );
background-color: gradient( radial, 50% 50%, 0% 0%, 80% 80%, from( #00ff00ff ), to( #0000ffff ) );
background-color: #0d1c22ff, gradient( radial, 100% -0%, 100px -40px, 320% 270%, from( #3a464bff ), color-stop( 0.23, #0d1c22ff ), to( #0d1c22ff ) );


背景图片

用来在背景中插入图片和视频,图片/视频需用逗号在列表中隔开。也可以添加一个“none”层来表示不添加背景图层。这个功能需要规定背景位置,背景大小和背景重复值。

几个例子:
background-image: url("file://{images}/default.tga"), url( "file://{movies}/Background1080p.webm" );


背景位置

控制背景图片的水平/竖直位置。格式如下: <left|center|right> <horizontal length> <top|center|bottom> <vertical length>

如果长度是百分比,它表示图片上位于这个比例的点将和板(也就是背景)上位于这个比例的点对齐。如果长度是像素, 则表示向两个方向各移动一定距离(默认状态应该是左上角对齐,百科中描述不明确,各位实际操作中一试便知)。 更多细节请看例子。

如果只明确了一个值,第二个值将默认被认为是center;如果明确了两个值,第一个必须是水平方向上的,第二哥必须是竖直方向上的。

几个例子:
// 将图片左上角与背景左上角对齐(默认情况)。
background-position: 0% 0%;

// 中心对齐 (相当于 "center center")
background-position: center;

// 将图片右下角和背景右下角对齐(相当于"100% 100%")
background-position: right bottom;

// 将图片左上角对齐至背景左上角右边10像素,下方40像素的点上。
background-position: left 10px top 40px;


背景重复

控制背景是否

Controls if the background should be repeated in the horizontal and vertical directions.

Possible values per direction:
"repeat" - (default) Repeated in the specified direction until it fills the panel
"space" - Repeated as many times as required to fill the panel w/o being clipped. Space is added between images to to align first and last image with panel edges.
"round" - Repeated as many times as required to fill the panel w/o being clipped. The image is resized to align first and last image with panel edges.
"no-repeat" - Not repeated

Possible single values:
"repeat-x" - equals "repeat no-repeat"
"repeat-y" - equals "no-repeat repeat"

Examples:
background-repeat: repeat; // equals "repeat repeat" (default)
background-repeat: repeat space; // repeats horizontally, spaces vertically 
background-repeat: no-repeat round; // 1 column of images, scaled to fit evenly


background-size

设置背景图水平和垂直方向上的尺寸。可以设置以像素或百分比为单位。设定为"contains"来设定为板的尺寸,或者设定为 "auto"来保持图片原有比例。默认设定为auto并保留原图尺寸。

如果要使用多个背景图层,需要在列表中用逗号隔开多个图片,并写明背景图/背景位置/背景重复值。

几个例子:
background-size: auto; // 同 "auto auto" (default) 
background-size: 100% 100%; // 图片覆盖整个板
background-size: 50% 75%; // 图片覆盖板的50%宽度和75%高度。
background-size: 300px 200px; // 背景被设置为300像素宽,200像素长


模糊

这个功能用来设置组合时应用到板(及其子板)上的模糊特效的数量。默认效果是无模糊的。目前高斯模糊是唯一可用的模糊类型,带有三个参数:水平标准差,垂直标准差,和PASS数量。好的标准差值在大约在0-10, 如果10依然不能满足需要,可以尝试增加PASS数。但是一个以上的PASS数量是不利于优化的。如果要间歇的话,可以只规定一个参数,水平和垂直的标准差都会被设置为这个参数,PASS数则被设置为1。

几个例子:
blur: gaussian( 2.5 );
blur: gaussian( 6, 6, 1 );


边界

该功能用于简便地设置板的边界,规定边框的宽度,款式,和颜色。受支持的款式有[实心]和[无]。

例子:
border: 2px solid #111111FF;


底边界

用于设置板的底边界,规定边框的宽度,款式,和颜色。受支持的款式有[实心]和[无]。

例子:
border-bottom: 2px solid #111111FF;


底边颜色

设定底边的边框颜色。

例子:
border-bottom-color: #111111FF;


左下边框圆弧半径

设定边框左下角圆弧的半径,背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值,单位可以是像素(px)或百分比,第一个数值是椭圆(圆弧来自于椭圆)的水平半径,第二个是椭圆的垂直半径。如果填写一个数值的话,那么两个半径将共用这个数值,当然圆弧不再来自椭圆而是正圆。

例子:
border-bottom-left-radius: 2px 2px;
border-bottom-left-radius: 5%;


右下边框圆弧半径

设定边框右下角圆弧的半径,背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值,单位可以是像素(px)或百分比,第一个数值是椭圆(圆弧来自于椭圆)的水平半径,第二个是椭圆的垂直半径。如果填写一个数值的话,那么两个半径将共用这个数值,当然圆弧不再来自椭圆而是正圆。

例子:
border-bottom-right-radius: 2px 2px;
border-bottom-right-radius: 5%;


底边界款式

设定板的底边界款式。

例子:
border-bottom-style: solid;


底边界宽度

设定板的底边界宽度。

例子:
border-bottom-width: 2px;


边界颜色

设定边界的颜色。填写一个颜色值时,四边都会应用这一种颜色。填写两个颜色值时,顶边和底边将会应用第一种颜色,左边和右边应用第二种颜色。填写四个颜色值时,会按照“上右下左”的顺序依次应用。

例子:
border-color: #111111FF;
border-color: #FF0000FF #00FF00FF #0000FFFF #00FFFFFF;


左边界

用于设置板的左边界,规定边框的宽度,款式,和颜色。受支持的款式有[实心]和[无]。

例子:
border-left: 2px solid #111111FF;


左边界颜色

设定左边的边框颜色。

例子:
border-left-color: #111111FF;


左边界款式

设定左边的边框颜色。

例子:
border-left-style: solid;


左边界宽度

设定板的左边界宽度。

例子:
border-left-width: 2px;


边界圆弧半径

一次性设定所有的圆弧半径。和前面的圆弧设定一样,板的边缘将会被裁剪。简写的话,可以只写一个值,格式为 水平半径/垂直半径,用“/”符号分开。你也可以写四个这样的值,以像素(px)或百分比。值的应用顺序是“左上、右上、右下、左下”。

例子:
// 2 px circular corners on all sides
border-radius: 2px;
// Perfect circular or elliptical panel (circular if box was square)
border-radius: 50% / 50%;
// 2 px horizontal radii 4px vertical elliptical corners on all sides
border-radius: 2px / 4px;
// All corners fully specified 
border-radius: 2px 3px 4px 2px / 2px 3px 3px 2px;


右边界

用于设置板的右边界,规定边框的宽度,款式,和颜色。受支持的款式有[实心]和[无]。

例子:
border-right: 2px solid #111111FF;


右边界颜色

设定右边的边框颜色。

例子:
border-right-color: #111111FF;


右边界款式

设定右边的边框颜色。

例子:
border-right-style: solid;


右边界宽度

设定板的右边界宽度。

例子:
border-right-width: 2px;


边界款式

设定板的边界款式。如果填写一个值,它将被应用到四条边上,如果填写两个值,那么上/下边会应用第一个值,左/右边会应用第二个值。如果填写四个值,那么应用顺序是“上右下左”。br>
例子:
border-style: solid;
border-style: solid none solid none;


顶边界

用于设置板的顶边界,规定边框的宽度,款式,和颜色。受支持的款式有[实心]和[无]。

例子:
border-top: 2px solid #111111FF;


顶边界颜色

设定顶边的边框颜色。

例子:
border-top-color: #111111FF;


左上边框圆弧半径

设定边框左上角圆弧的半径,背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值,单位可以是像素(px)或百分比,第一个数值是椭圆(圆弧来自于椭圆)的水平半径,第二个是椭圆的垂直半径。如果填写一个数值的话,那么两个半径将共用这个数值,当然圆弧不再来自椭圆而是正圆。

例子:
border-top-left-radius: 2px 2px;
border-top-left-radius: 5%;


右上边框圆弧半径

设定边框右上角圆弧的半径,背景和前景会被裁剪以贴合边框。这里可以填写一个或两个数值,单位可以是像素(px)或百分比,第一个数值是椭圆(圆弧来自于椭圆)的水平半径,第二个是椭圆的垂直半径。如果填写一个数值的话,那么两个半径将共用这个数值,当然圆弧不再来自椭圆而是正圆。

Examples:
border-top-right-radius: 2px 2px;
border-top-right-radius: 5%;


顶边界款式

设定顶边的边框颜色。

例子:
border-top-style: solid;


顶边界宽度

设定板的顶边界宽度。

例子:
border-top-width: 2px;


边界宽度

设定板的边界宽度。如果填写一个值,它将被应用到四条边上,如果填写两个值,那么上/下边会应用第一个值,左/右边会应用第二个值。如果填写四个值,那么应用顺序是“上右下左”

例子:
border-width: 1px;'
border-width: 20px 1px 20px 1px;


方形阴影

设定方形区域的外阴影或内阴影/发光。阴影形状和板的边界形状是一样的,所以设置的时候请设定成与边界一样的弧度。填写时的变量顺序是:(选填)“inset(插入)”/“fill(填满)”、颜色、水平距离、垂直距离、模糊半径、像素分散距离。选择Inset时,效果是内阴影/发光。Fill只在能用于外阴影,阴影会垫在方形区域下方。

例子:
box-shadow: #ffffff80 4px 4px 8px 0px; // outer
box-shadow: fill #ffffff80 4px 4px 8px 0px; // outer, filled
box-shadow: inset #333333b0 0px 0px 8px 12px; // inner


亮度

在合成时设置板及其所有子板的亮度。这里采用的是HSB模式中的亮度系数。

例子:
brightness: 1.5;


裁剪

在板内设定一个裁剪区域,这部分的内容在渲染时会被裁剪掉。裁剪动作不会改变板的布局设置,是一个非常快捷的功能,并且支持变换/动画效果。

例子:
clip: rect( 10%, 90%, 90%, 10% );


颜色

设置板的前景填充/渐变/混合色。这个颜色将会用来渲染板内文本。

例子:
color: #FFFFFFFF;
color: gradient( linear, 0% 0%, 0% 100%, from( #cbcbcbff ), to( #a0a0a0a0 ) );


context-menu-arrow-position

Specifies where to point the arrow of a context menu at on this panel. The first value controls how the arrow is positioned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the context menu is to the left or right of the panel. Default is '50% 50%'.

Example:
context-menu-arrow-position: 25% 50%;


context-menu-body-position

Specifies where to position the body of a context menu relative to this panel. The first value controls how the body is aligned horizontally when the context menu is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the context menu is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

Example:
context-menu-body-position: 50% 100%;


context-menu-position

Specifies where to position a context menu relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the context menu doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the context menu first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:
context-menu-position: bottom;
context-menu-position: left bottom;


对比度

在合成时设置该板及其所有子板的对比度。

例子:
contrast: 1.5;


flow-children

<内容暂缺>


font

<内容暂缺>


字体系列

设定将要使用的字体。

例子:
font-family: Arial;
font-family: "Comic Sans MS";


字体大小

设置字体的高度,以像素为单位。

例子:
font-size: 12;


字体款式

设定字体的款式。受支持的款式有:normal(正常)、italic(斜体)。

例子:
font-style: normal;


字体粗细

设定字体的粗细。受支持的值有light, thin, normal, medium, bold, 和 black(这几个值从细到粗递增)。

例子:
font-weight: normal;
font-weight: bold;
font-weight: thin;


高度

设定板的高度。可选用的值如下:
"fit-children" - 板的尺寸被设定为所有子板的要求尺寸(默认情况)。
<pixels> - 任何固定的像素值。 (例: "100px")
<percentage> - 高度的百分比。 (例: "100%")
"fill-parent-flow( <weight> )" - 与父板的宽度对齐。如果多个子板被设定使用这个值,那么高度会被按照加权“分配”,比如三个板被设定为fill-parent-flow( 1.0 ),并且它们的父板是300像素高,那么每个子板最终会是100像素高(括号里的即为加权数)。(例: "fill-parent-flow( 1.0 )" )
"width-percentage( <percentage> )" - 将高设定为宽的百分比,这样就可以实现固定比例。但是宽的设定不能同时为高的百分比。


horizontal-align

<内容暂缺>


色相旋转

在组合时,设定板及其子板的色相旋转。默认情况为0.0,既无变化。值域采用角度制。

Sets the hue rotation to apply to the panel and all it's children during composition. Default of 0.0 means no adjustment, domain is in degrees.

例子:
hue-rotation: 180deg;


字符间距

设置字符串中文本的间距。可用值有:
normal - 不手动改变间距
<pixels> - 任何以像素为单位的值 (例: "1px")


行高

设置行高(一行字上界到下界的距离)。默认情况下,这个设置是没有被启用的,实际的行高会自动匹配字体大小。

例子:
line-height: 20px;


margin

<内容暂缺>


margin-bottom

<内容暂缺>


margin-left

<内容暂缺>


margin-right

<内容暂缺>


margin-top

<内容暂缺>


max-height

<内容暂缺>


max-width

<内容暂缺>


min-height

<内容暂缺>


min-width

<内容暂缺>


opacity

Sets the opacity or amount of transparency applied to the panel and all it's children during composition. Default of 1.0 means fully opaque, 0.0 means fully transparent.

Example:
opacity: 0.8;


opacity-mask

Applies an image as an opacity mask that stretches to the panel bounds and fades out it's content based on the alpha channel. The second float value is an optional opacity value for the mask itself, the image won't interpolate/cross-fade, but you can animate the opacity to fade the mask in/out. The -scroll-up, -scroll-down, and -scroll-up-down varients override the mask and apply only when the various vertical scroll scenarios affect the panel based on the overflow property.

Examples:
opacity-mask: url( "file://{images}/upper_row_mask.tga" );
opacity-mask: url( "file://{images}/upper_row_mask.tga" ) 0.5;
opacity-mask-scroll-up: url( "file://{images}/upper_row_mask_up.tga" ) 0.5;
opacity-mask-scroll-down: url( "file://{images}/upper_row_mask_down.tga" ) 0.5;
opacity-mask-scroll-up-down: url( "file://{images}/upper_row_mask_up_down.tga" ) 0.5;


opacity-mask-scroll-down

opacity-mask-scroll-up

opacity-mask-scroll-up-down

overflow

Specifies what to do with contents that overflow the available space for the panel. Possible values:
"squish" - Children are squished to fit within the panel's bounds if needed (default)
"clip" - Children maintain their desired size but their contents are clipped
"scroll" - Children maintain their desired size and a scrollbar is added to this panel

Examples:
overflow: squish squish; // squishes contents in horizontal and vertical directions
overflow: squish scroll; // scrolls contents in the Y direction


padding

<内容暂缺>


padding-bottom

<内容暂缺>


padding-left

<内容暂缺>


padding-right

<内容暂缺>


padding-top

<内容暂缺>


透视

为板的子板设置透视深度。默认深度为1000,表示摄像机到元素的距离为1000像素。

例子:
perspective: 1000;


透视原点

设置子板发生透视形变时的“原点”,既摄像机相对于板的X/Y坐标。

例子:
perspective-origin: 50% 50%;


位置

设置板的X/Y/Z坐标。在流动布局中不可用。

例子:
position: 3% 20px 0px;


2D预旋转形变

在3D形变发生之前,设置该板在2D平面上的旋转量。旋转中心为板先前的中心,且旋转时不发生透视。

透视:
pre-transform-rotate2d: 45deg;


3D比例形变

在3D形变发生之前,设置该板在2D平面上的XY方向比例。板的中心不改变,且不发生透视。默认值为1.0 ,表示没有缩放,0.5则表示缩放至原先的一半大小。

例子:
pre-transform-scale2d: 0.8
pre-transform-scale2d: 0.4, 0.6


饱和度

设置板及其所有子板的饱和度。1.0表示不做任何调整,0.0表示完全不饱和(即灰度),1.0以上表示过饱和。

例子:
saturation: 0.4;


音效

设定一个音效,当选择器被触发的时候播放。

例子:
sound: "whoosh_in";


sound-out

Specifies a sound name to play when this selector is removed.

Example:
sound-out: "whoosh_out";


text-align

Specifies the text alignment for text within this panel, defaults to left.

Examples:
text-align: left;
text-align: right;
text-align: center;


text-decoration

Specifies the decoration for text within this panel, defaults to none. Possible values: none, underline, line-through.

Example:
text-decoration: underline;


text-overflow

Controls truncation of text that doesn't fit in a panel. "clip" means to simply truncate (on char boundaries), "ellipsis" means to end with '...'.

We default to ellipsis, which is contrary to the normal CSS spec.

Examples:
text-overflow: ellipsis;
text-overflow: clip;


text-shadow

Specifies text shadows. The shadow shape will match the text the panel can generate,and this is only meaningful for labels. Syntax takes horizontal offset pixels, vertical offset pixels, blur radius pixels, strength, and then shadow color.

Example:
text-shadow: 2px 2px 8px 3.0 #333333b0;


text-transform

Specifies the transform for text within this panel, defaults to none. Possible values: none, uppercase, lowercase.

Example:
text-transform: uppercase;


texture-sampling

Controls texture sampling mode for the panel. Set to alpha-only to use the textures alpha data across all 3 color channels.

Examples:
texture-sampling: normal;
texture-sampling: alpha-only;


tooltip-arrow-position

Specifies where to point the arrow of a tooltip at on this panel. The first value controls how the arrow is positioned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the arrow is positioned vertically when the tooltip is to the left or right of the panel. Default is '50% 50%'.

Example:
tooltip-arrow-position: 25% 50%;


tooltip-body-position

Specifies where to position the body of a tooltip relative to this panel. The first value controls how the body is aligned horizontally when the tooltip is to the top or bottom of the panel, and the second value controls how the body is aligned vertically when the tooltip is to the left or right of the panel. 0% means left/top aligned, 50% means center/middle aligned, and 100% means right/bottom aligned. Default is '0% 0%'.

Example:
tooltip-body-position: 50% 100%;


tooltip-position

Specifies where to position a tooltip relative to this panel. Valid options include 'left', 'top', 'right', and 'bottom'. List up to 4 positions to determine the order that positions are tried if the tooltip doesn't fully fit on screen. Default is 'right left bottom top'. If less than 4 positions are specified, the tooltip first tries the opposite of the specified position along the same axis before switching to the other axis.

Examples:
tooltip-position: bottom;
tooltip-position: left bottom;


transform

Sets the transforms to apply to the panel in 2d or 3d space. You can combine various transforms (comma separated) and they will be applied in order to create a 4x4 3d transform matrix. The possible operations are: translate3d( x, y, z ), translatex( x ), translatey( y ), translatez( z ), scale3d( x, y, z), rotate3d( x, y, z ), rotatex( x ), rotatey( y ), rotatez( z ).

Examples:
transform: translate3d( -100px, -100px, 0px );
transform: rotateZ( -32deg ) rotateX( 30deg ) translate3d( 125px, 520px, 230px );


transform-origin

Sets the transform origin about which transforms will be applied. Default is 50% 50% on the panel so a rotation/scale is centered.

Example:
transform-origin: 50% 50%


transition

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles. Also specifies duration, timing function, and delay. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

Example:
transition: position 2.0s ease-in-out 0.0s, perspective-origin 1.2s ease-in-out 0.8s;


transition-delay

Specifies the delay in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:
transition-delay: 0.0s;
transition-delay: 0.0s, 1.2s;


transition-duration

Specifies the durating in seconds to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property.

Examples:
transition-duration: 2.0s;
transition-duration: 2.0s, 1.2s, 1.2s, 4.0s, 2.0s;


transition-property

Specifies which properties should transition smoothly to new values if a class/pseudo class changes the styles.

Examples:
transition: position, transform, background-color;


transition-timing-function

Specifies the timing function to use for transition properties on this panel, if more than one comma delimited value is specified then the values are applied to each property specified in 'transition-property' in order. If only one value is specified then it applies to all the properties specified in transition-property. Valid timing functions are: ease, ease-in, ease-out, ease-in-out, linear.

Examples:
transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out, linear;
transition-timing-function: cubic-bezier( 0.785, 0.385, 0.555, 1.505 );


vertical-align

<内容暂缺>


visibility

Controls if the panel is visible and is included in panel layout. Possible values:
"visible" - panel is visible and included in layout (default)
"collapse" - panel is invisible and not included in layout


wash-color

Specifies a 'wash' color, which means a color that will be blended over the panel and all it's children at composition time, tinting them. The alpha value of the color determines the intensity of the tinting.

Example:
wash-color: #39b0d325;


white-space

Controls white-space wrapping on rendered text. "normal" means wrap on whitespace, "nowrap" means do no wrapping at all.

Examples:
white-space: normal;
white-space: nowrap;


width

Sets the width for this panel. Possible values:
"fit-children" - Panel size is set to the required size of all children (default)
<pixels> - Any fixed pixel value (ex: "100px")
<percentage> - Percentage of parent width (ex: "100%")
"fill-parent-flow( <weight> )" - Fills to remaining parent width. If multiple children are set to this value, weight is used to determine final width. For example, if three children are set to fill-parent-flow of 1.0 and the parent is 300px wide, each child will be 100px wide. (ex: "fill-parent-flow( 1.0 )" )
"height-percentage( <percentage> )" - Percentage of the panel's height, which allows you to enforce a particular aspect ratio. The height cannot also be width-percentage.


x

Sets the x, y, z position for a panel. Must not be in a flowing layout.

Example:
position: 3% 20px 0px;


y

Sets the x, y, z position for a panel. Must not be in a flowing layout.

Example:
position: 3% 20px 0px;


z

Sets the x, y, z position for a panel. Must not be in a flowing layout.

Example:
position: 3% 20px 0px;


z-index

Sets the z-index for a panel, panels will be sorted and painted in order within a parent panel. The sorting first sorts by the z-pos computed from position and transforms, then if panels have matching zpos zindex is used. z-index is different than z-pos in that it doesn't affect rendering perspective, just paint/hit-test ordering. The default z-index value is 0, and any floating point value is accepted.

Example:
z-index: 1;