本文介紹了螞蟻動態卡片在數值、時間、長度和顏色等方面的定義。
數值單位
卡片中有一些屬性需執行純數值單位,比如 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 |