本文介绍了蚂蚁动态卡片在数值、时间、长度和颜色等方面的定义。
数值单位
卡片中有一些属性需执行纯数值单位,比如 flex,lines 等,此时数值后不加 px、vw 等单位。
纯数值的取值范围和取值类型,请参见 通用样式 中各组件的属性定义。如果遇到非纯数值,则默认按照 0 处理。
示例:
lines:5;
flex:1;
时间单位
卡片有部分属性需要用时间描述,例如:animation-duration。卡片支持以秒、毫秒为时间单位。
示例:
animation-duration:2s;
长度单位
卡片有几种不同的单位表示长度,长度由一个数字和单位组成,数字和单位之间不能出现空格,长度单位分为内置单位和自定义单位。
内置单位
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用
vw:viewpoint width,视窗宽度,1vw = 视窗宽度的 1%。
%:视窗高/宽度的百分比。
示例:
font-size: 20vw;
background-size:50%;
绝对长度
绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)
px:像素 (1px = 1/96th of 1in)
rpx:以 750 为基准计算,2rpx = 1px
示例:
font-size: 17px;
line-height:40rpx;
单击此处 detailLength.zip 获取完整示例代码。
颜色单位
卡片中的颜色可以通过以下方法进行指定:
十六进制
RGB 颜色
颜色名称
十六进制颜色
指定一个十六进制的颜色的组成部分有几种方式:
#RRGGBB,其中 RR(红色),GG(绿色)和 BB(蓝色)。所有值必须介于 0 和 FF 之间。
例如,#0000FF 值呈现为蓝色,因为蓝色的组成设置为最高值 FF 而其他设置为 0。
#RGB,其中 R(红色),G(绿色)和 B(蓝色)。所有值必须介于 0 和 F 之间。
例如,#00F 值呈现为蓝色,因为蓝色的组成设置为最高值 F 而其他设置为 0。
0xrrggbb,其中 rr(红色),gg(绿色)和 bb(蓝色)。所有值必须介于 0 和 ff 之间。
例如,0x0000ff 值呈现为蓝色,因为蓝色的组成设置为最高值 ff 而其他设置为 0。
示例:
background-color:#ff0000;
border-top-color:0x0000ff;
border-bottom-color:#00f;
RGB 颜色
指定一个 RGB 的颜色其组成部分有几种方式:
RGB(红、绿、蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,为 0 和 255 之间的整数。例如RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值 255 而其他设置为 0。
RGBA(红、绿、蓝,alpha)。Alpha 参数是一个介于 0.0(完全透明)和 1.0(完全不透明)之间的参数。例如 RGB(0,0,255,0.5)值呈现为半透明的蓝色。
示例:
background-color:rgb(0,0,255);
border-color:rgba(255,0,0,0.5);
颜色名称
卡片支持 147 种颜色名称定义,包括 17 个标准色和 130 个其他颜色。下表列出了所有颜色的名称和对应的十六进制值。
标准色
名称 | 十六进制 |
red | 0xffff0000 |
blue | 0xff0000ff |
black | 0xff000000 |
…… | …… |
其他
名称 | 十六进制 |
red | 0xffff0000 |
blue | 0xff0000ff |
black | 0xff000000 |
…… | …… |
示例
background-color:red;
只有上面列出的颜色格式被支持,其他的颜色格式均不被支持。
如果遇到不被支持的颜色格式,卡片将按照默认透明色处理(部分样式有独立的默认色规则除外)。
单击此处 detailColor.zip 获取完整示例代码。
附录 - 色值定义
名称 | 色值 |
red | 0xffff0000 |
darkred | 0xff8b0000 |
tan | 0xffd2b48c |
linen | 0xfffaf0e6 |
sienna | 0xffa0522d |
indianred | 0xffcd5c5c |
teal | 0xff008080 |
grey | 0xff808080 |
green | 0xff008000 |
gray | 0xff808080 |
darkgrey | 0xffa9a9a9 |
darkgreen | 0xff006400 |
beige | 0xfff5f5dc |
orange | 0xffffa500 |
darkgray | 0xffa9a9a9 |
orangered | 0xffff4500 |
khaki | 0xfff0e68c |
seagreen | 0xff2e8b57 |
gold | 0xffffd700 |
darkorange | 0xffff8c00 |
darkkhaki | 0xffbdb76b |
indigo | 0xff4b0082 |
goldenrod | 0xffdaa520 |
maroon | 0xff800000 |
gainsboro | 0xffdcdcdc |
lime | 0xff00ff00 |
greenyellow | 0xffadff2f |
darkgoldenrod | 0xffb8860b |
slategrey | 0xff708090 |
slategray | 0xff708090 |
salmon | 0xfffa8072 |
darkseagreen | 0xff8fbc8f |
seaShell | 0xfffff5ee |
darksalmon | 0xffe9967a |
tomato | 0xffff6347 |
thistle | 0xffd8bfd8 |
darkslategrey | 0xff2f4f4f |
cyan | 0xff00ffff |
forestgreen | 0xff228b22 |
dimgrey | 0xff696969 |
darkslategray | 0xff2f4f4f |
mistyrose | 0xffffe4e1 |
dimgray | 0xff696969 |
darkcyan | 0xff008b8b |
black | 0xff000000 |
magenta | 0xffff00ff |
limegreen | 0xff32cd32 |
coral | 0xffff7f50 |
darkmagenta | 0xff8b008b |
azure | 0xfff0ffff |
blue | 0xff0000ff |
oldlace | 0xfffdf5e6 |
cornsilk | 0xfffff8dc |
darkblue | 0xff00008b |
skyblue | 0xff87ceeb |
firebrick | 0xffb22222 |
orchid | 0xffda70d6 |
lightgrey | 0xffd3d3d3 |
lightgreen | 0xff90ee90 |
lightyellow | 0xffffffe0 |
lightgray | 0xffd3d3d3 |
darkorchid | 0xff9932cc |
royalblue | 0xff4169e1 |
aqua | 0xff00ffff |
steelblue | 0xff4682b4 |
bisque | 0xffffe4c4 |
crimson | 0xffdc143c |
slateblue | 0xff6a5acd |
dodgerblue | 0xff1e90ff |
blanchedalmond | 0xffffebcd |
lightseagreen | 0xff20b2aa |
lightslategrey | 0xff778899 |
lightslategray | 0xff778899 |
brown | 0xffa52a2a |
lightsalmon | 0xffffa07a |
snow | 0xfffffafa |
lightcyan | 0xffe0ffff |
rosybrown | 0xffbc8f8f |
sandybrown | 0xfff4a460 |
darkslateblue | 0xff483d8b |
yellow | 0xffffff00 |
lightcoral | 0xfff08080 |
mintcream | 0xfff5fffa |
aquamarine | 0xff7fffd4 |
saddlebrown | 0xff8b4513 |
honeydew | 0xfff0fff0 |
pink | 0xffffc0cb |
lightblue | 0xffadd8e6 |
cadetblue | 0xff5f9ea0 |
wheat | 0xfff5deb3 |
lawngreen | 0xff7cfc00 |
white | 0xffffffff |
aliceblue | 0xfff0f8ff |
chocolate | 0xffd2691e |
yellowgreen | 0xff9acd32 |
moccasin | 0xffffe4b5 |
navy | 0xff000080 |
chartreuse | 0xff7fff00 |
ivory | 0xfffffff0 |
palegreen | 0xff98fb98 |
lavender | 0xffe6e6fa |
hotpink | 0xffff69b4 |
olive | 0xff808000 |
fuchsia | 0xffff00ff |
mediumseagreen | 0xff3cb371 |
silver | 0xffc0c0c0 |
olivedrab | 0xff6b8e23 |
darkturquoise | 0xff00ced1 |
turquoise | 0xff40e0d0 |
violet | 0xffee82ee |
violetred | 0xffd02090 |
darkviolet | 0xff9400d3 |
palegoldenrod | 0xffeee8aa |
whitesmoke | 0xfff5f5f5 |
springgreen | 0xff00ff7f |
burlywood | 0xffdeb887 |
peru | 0xffcd853f |
floralwhite | 0xfffffaf0 |
lightpink | 0xffffb6c1 |
darkolivegreen | 0xff556b2f |
ghostwhite | 0xfff8f8ff |
mediumblue | 0xff0000cd |
mediumorchid | 0xffba55d3 |
lightsteelblue | 0xffb0c4de |
lightslateblue | 0xff8470ff |
transparent | 0x00000000 |
deepskyblue | 0xff00bfff |
lightskyblue | 0xff87cefa |
lightgoldenrodyellow | 0xfffafad2 |
plum | 0xffdda0dd |
mediumaquamarine | 0xff66cdaa |
mediumslateblue | 0xff7b68ee |
blueviolet | 0xff8a2be2 |
midnightblue | 0xff191970 |
deeppink | 0xffff1493 |
lemonchiffon | 0xfffffacd |
antiquewhite | 0xfffaebd7 |
paleturquoise | 0xffafeeee |
powderblue | 0xffb0e0e6 |
navajowhite | 0xffffdead |
mediumspringgreen | 0xff00fa9a |
cornflowerblue | 0xff6495ed |
palevioletred | 0xffdb7093 |
mediumvioletred | 0xffc71585 |
purple | 0xff800080 |
rebeccapurple | 0xff663399 |
lavenderblush | 0xfffff0f5 |
mediumturquoise | 0xff48d1cc |
peachpuff | 0xffffdab9 |
mediumpurple | 0xff9370db |
papayawhip | 0xffffefd5 |