Selection controls - 選擇控件
Selection controls allow the user to select options.
【翻譯】
選擇控件允許用戶選擇選項(xiàng)。
Three types of selection controls are covered in this guidance:
Checkboxes allow the selection of multiple options from a set.
Radio buttons allow the selection of a single option from a set.
Switches allow a selection to be turned on or off.
【翻譯】
本指南包括三種類型的選擇控制：
復(fù)選框允許從一組中選擇多個(gè)選項(xiàng)。
單選按鈕允許從一個(gè)集合中選擇單個(gè)選項(xiàng)。
開關(guān)允許選擇打開或關(guān)閉。
Color - 顏色
Selection controls use an app’s accent color.
【翻譯】
選擇控件使用應(yīng)用的強(qiáng)調(diào)顏色。
Themes - 主題
Selection controls are available in both dark and light themes.
【翻譯】
選擇控件可用于暗和亮主題。
Checkbox - 復(fù)選框
Checkboxes allow the user to select multiple options from a set.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.
If you have a single option, avoid using a checkbox and use an on/off switch instead.
【翻譯】
復(fù)選框允許用戶從集合中選擇多個(gè)選項(xiàng)。
如果列表中有多個(gè)選項(xiàng)，您可以使用復(fù)選框而不是開/關(guān)開關(guān)來(lái)保留空間。
如果您有單個(gè)選項(xiàng)，請(qǐng)避免使用復(fù)選框，而使用開/關(guān)開關(guān)。
[圖片上傳失敗...(image-ad7a98-1552294680602)]
Light theme
【翻譯】
亮色主題
[圖片上傳失敗...(image-caf6fd-1552294680602)]
Dark theme
【翻譯】
暗色主題
Light - 亮色
On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%
【翻譯】
開：色板 500，不透明度100％
關(guān)閉：＃000000，不透明度54％
禁用：＃000000，不透明度26％
Light theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
淺色主題的懸停，聚焦，按下，禁用和禁用焦點(diǎn)狀態(tài)的復(fù)選框。
Dark - 暗色
On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%
【翻譯】
開：色板 500，不透明度100％
關(guān)閉：#FFFFFF，不透明度70％
已禁用：#FFFFFF，不透明度30％
[圖片上傳失敗...(image-2eb60e-1552294680602)]
Dark theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
黑色主題的懸停，聚焦，按下，禁用和禁用焦點(diǎn)狀態(tài)的復(fù)選框。
Radio button - 單選按鈕
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
Otherwise, consider a dropdown, which uses less space than displaying all options.
【翻譯】
單選按鈕允許用戶從一組中選擇一個(gè)選項(xiàng)。如果您認(rèn)為用戶需要并排查看所有可用的選項(xiàng)，請(qǐng)使用單選按鈕進(jìn)行獨(dú)占選擇。
否則，請(qǐng)考慮一個(gè)下拉列表，其使用的空間比顯示所有選項(xiàng)少。
[圖片上傳失敗...(image-adb506-1552294680602)]
Light theme for radio buttons
【翻譯】
亮色主題的單選按鈕
[圖片上傳失敗...(image-50b1b9-1552294680602)]
Dark theme for radio buttons
【翻譯】
暗色主題的單選按鈕
Light - 亮色
On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%
【翻譯】
開：色板 500，不透明度100％
關(guān)閉：＃000000，不透明度54％
禁用：＃000000，不透明度26％
[圖片上傳失敗...(image-500735-1552294680602)]
Light theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
輕松主題的單選按鈕懸停，聚焦，按下，禁用和禁用焦點(diǎn)狀態(tài)。
Dark - 暗色
On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%
【翻譯】
開：色板 500，不透明度100％
關(guān)閉：#FFFFFF，不透明度70％
已禁用：#FFFFFF，不透明度30％
[圖片上傳失敗...(image-70e202-1552294680602)]
Dark theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
黑色主題的單選按鈕懸停，聚焦，按下，禁用和禁用焦點(diǎn)狀態(tài)。
Switch - 開關(guān)
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead.
【翻譯】
開/關(guān)開關(guān)可切換單個(gè)設(shè)置選項(xiàng)的狀態(tài)。 開關(guān)控制的選項(xiàng)以及它所處的狀態(tài)應(yīng)該從相應(yīng)的內(nèi)聯(lián)標(biāo)簽中清除。 開關(guān)采用單選按鈕的相同視覺屬性。 不推薦使用包含在資產(chǎn)中的文字“開”和“關(guān)”的開/關(guān)幻燈片切換。 使用此處顯示的開關(guān)。
[圖片上傳失敗...(image-14d8e8-1552294680602)]
Light theme
【翻譯】
亮色主題
[圖片上傳失敗...(image-4c9e60-1552294680602)]
Dark theme
【翻譯】
暗色主題
Light - 亮色
Thumb On: Swatch 500, Opacity 100%
Track On: Swatch 500, Opacity 50%
Thumb Off: Grey 50, #FAFAFA, Opacity 100%
Track Off: #000000, Opacity 38%
Thumb Disabled: Grey 400, #BDBDBD, Opacity 100%
Track Disabled: #000000, Opacity 12%
【翻譯】
開關(guān)開：色板 500，不透明度100％
軌道開：色板 500，不透明度50％
開關(guān)關(guān)：灰色50，#FAFAFA，不透明度100％
軌道關(guān)：＃000000，不透明度38％
開關(guān)禁用：灰色400，#BDBDBD，不透明度100％
軌道已禁用：＃000000，不透明度12％
[圖片上傳失敗...(image-cfc01d-1552294680602)]
Light theme for switches in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
輕松主題的開關(guān)在懸停，聚焦，按下，禁用和禁用焦點(diǎn)狀態(tài)。
Dark - 暗色
Thumb On: Swatch 200, Opacity 100%
Track On: Swatch 200, Opacity 50%
Thumb Off: Grey 400, #BDBDBD, Opacity 100%
Track Off: #FFFFFF, Opacity 30%
Thumb Disabled: Grey 800, #424242, Opacity 100%
Track Disabled: #FFFFFF, Opacity 10%
【翻譯】
開關(guān)開：Swatch 200，不透明度100％
軌道開：Swatch 200，不透明度50％
開關(guān)關(guān)：灰色400，#BDBDBD，不透明度100％
軌道關(guān)：#FFFFFF，不透明度30％
開關(guān)禁用：灰色800，＃424242，不透明度100％
軌道禁用：#FFFFFF，不透明度10％
Dark theme for switches in hover, focused, pressed, disabled, and disabled focused states.
【翻譯】
黑暗主題為開關(guān)在懸停，聚焦，按下，禁用和禁用聚焦?fàn)顟B(tài)。
Use the outer radial reaction only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.
【翻譯】
使用外徑向反應(yīng)只有在有利于手指觸摸的形狀因素，其中相互作用可能完全阻礙元素。對(duì)于使用鼠標(biāo)的桌面，您不需要此額外的指示。
[圖片上傳失敗...(image-b27b1b-1552294680602)]
Radial reaction on mobile
【翻譯】
在移動(dòng)上的徑向反應(yīng)
[圖片上傳失敗...(image-92228f-1552294680602)]
No radial reaction on desktop
【翻譯】
桌面上沒有徑向反應(yīng)
