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

復(fù)選框

單選按鈕

切換開關(guān)

復(fù)選框

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

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

如果你有一個單選項，不要用復(fù)選框，使用開/關(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="" /> 黑色主題

白色

開: Swatch 500, 透明度 100%

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

失效: #000000, 透明度 26%

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

黑色

開: Swatch 500, 透明度 100%

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

失效: #FFFFFF, 透明度 30%

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

單選按鈕

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

此外，考慮使用下拉列表，相對于顯示所有的選項占用更少的空間。

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

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

白色

開: Swatch 500, 透明度 100%

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

失效: #000000, 透明度 26%

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

黑色

開: Swatch 500, 透明度 100%

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

失效: #FFFFFF, 透明度 30%

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

切換開關(guān)

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

使用文本“開”和“關(guān)”滑動切換已經(jīng)過時了。使用這里顯示的開關(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="" /> 白色主題的開關(guān)選擇器在懸停、聚焦、按動、失效以及失效聚焦的狀態(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="" /> 黑色主題的開關(guān)選擇器在懸停、聚焦、按動、失效以及失效聚焦的狀態(tài)。

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

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

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