選擇控制器

選擇控制器允許用戶(hù)選擇選項(xiàng)。有三種類(lèi)型：復(fù)選框、單選框以及開(kāi)/關(guān)切換。選擇控制器使用主題同樣的顏色。

復(fù)選框

單選按鈕

切換開(kāi)關(guān)

復(fù)選框

復(fù)選框允許用戶(hù)從一個(gè)數(shù)據(jù)集中選擇多個(gè)選項(xiàng)。

如果在一個(gè)列表中有多個(gè)選項(xiàng)，你可以通過(guò)使用復(fù)選框而不是開(kāi)/關(guān)切換來(lái)節(jié)省空間。

如果你有一個(gè)單選項(xiàng)，不要用復(fù)選框，使用開(kāi)/關(guān)切換。

http://wiki.jikexueyuan.com/project/material-design/images/9_1.png" alt="" /> 白色主題

http://wiki.jikexueyuan.com/project/material-design/images/9_2.png" alt="" /> 黑色主題

白色

開(kāi): Swatch 500, 透明度 100%

關(guān): #000000, 透明度 54%

失效: #000000, 透明度 26%

http://wiki.jikexueyuan.com/project/material-design/images/9_3.png" alt="" /> 白色主題的復(fù)選框在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

黑色

開(kāi): Swatch 500, 透明度 100%

關(guān): #FFFFFF, 透明度 70%

失效: #FFFFFF, 透明度 30%

http://wiki.jikexueyuan.com/project/material-design/images/9_4.png" alt="" /> 白色主題的復(fù)選框在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

單選按鈕

單選按鈕允許用戶(hù)從一個(gè)數(shù)據(jù)集中選擇單個(gè)選項(xiàng)。如果你覺(jué)得用戶(hù)需要并排看到所有的可選項(xiàng)，使用單選按鈕進(jìn)行排他操作。

此外，考慮使用下拉列表，相對(duì)于顯示所有的選項(xiàng)占用更少的空間。

http://wiki.jikexueyuan.com/project/material-design/images/9_5.png" alt="" /> 白色主題的單選按鈕

http://wiki.jikexueyuan.com/project/material-design/images/9_6.png" alt="" /> 黑色主題的單選按鈕

白色

開(kāi): Swatch 500, 透明度 100%

關(guān): #000000, 透明度 54%

失效: #000000, 透明度 26%

http://wiki.jikexueyuan.com/project/material-design/images/9_7.png" alt="" /> 白色主題的單選按鈕在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

黑色

開(kāi): Swatch 500, 透明度 100%

關(guān): #FFFFFF, 透明度 70%

失效: #FFFFFF, 透明度 30%

http://wiki.jikexueyuan.com/project/material-design/images/9_8.png" alt="" /> 黑色主題的單選按鈕在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

切換開(kāi)關(guān)

開(kāi)/關(guān)切換器切換單個(gè)設(shè)置選項(xiàng)的狀態(tài)。開(kāi)關(guān)控制器中的選項(xiàng)，以及它所在的狀態(tài)，應(yīng)該用伴隨的內(nèi)聯(lián)標(biāo)簽顯示清楚。開(kāi)關(guān)選擇器具有和單選按鈕一樣的視覺(jué)屬性。

使用文本“開(kāi)”和“關(guān)”滑動(dòng)切換已經(jīng)過(guò)時(shí)了。使用這里顯示的開(kāi)關(guān)選擇器代替。

http://wiki.jikexueyuan.com/project/material-design/images/9_9.png" alt="" /> 白色主題

http://wiki.jikexueyuan.com/project/material-design/images/9_10.png" alt="" /> 黑色主題

白色 Thumb On: Swatch 500, 透明度 100%

Track On: Swatch 500, 透明度 50%

Thumb Off: Grey 50, #FAFAFA, 透明度 100% Track Off: #000000, 透明度 26%

Thumb Disabled: Grey 400, #BDBDBD, 透明度 100% Track Disabled: #000000, 透明度 12%

http://wiki.jikexueyuan.com/project/material-design/images/9_11.png" alt="" /> 白色主題的開(kāi)關(guān)選擇器在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

黑色 Thumb On: Swatch 200, 透明度 100%

Track On: Swatch 200, 透明度 50%

Thumb Off: Grey 400, #BDBDBD, 透明度 100%

Track Off: #FFFFFF, 透明度 30%

Thumb Disabled: Grey 800, #424242, 透明度 100%

Track Disabled: #FFFFFF, 透明度 10%

http://wiki.jikexueyuan.com/project/material-design/images/9_12.png" alt="" /> 黑色主題的開(kāi)關(guān)選擇器在懸停、聚焦、按動(dòng)、失效以及失效聚焦的狀態(tài)。

在手指觸控的表單元素上使用外部圓圈反應(yīng)，這里的交互可能會(huì)完全阻礙元素。對(duì)于一個(gè)使用鼠標(biāo)的桌面應(yīng)用，沒(méi)必要使用這種多余的效果。

http://wiki.jikexueyuan.com/project/material-design/images/9_13.png" alt="" /> 手機(jī)上的外部反應(yīng)

http://wiki.jikexueyuan.com/project/material-design/images/9_14.png" alt="" /> 桌面應(yīng)用中沒(méi)有外部反應(yīng)