全部產品
Search
文件中心

Mobile Platform as a Service:單位

更新時間:Aug 02, 2024

本文介紹了螞蟻動態卡片在數值、時間、長度和顏色等方面的定義。

數值單位

卡片中有一些屬性需執行純數值單位,比如 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