选择使用户能够通过手势和视觉提示做出选择。
复选框表示完成,例如勾选列表中的项目。
文本选择由一段高亮的文本来表示。
选择类型
项目选择
文本选择
选择手势
- 在同一位置长按、触摸或按住鼠标不放
- 双指触摸(仅限触摸设备)

复选框表示完成,例如勾选列表中的项目。
文本选择由一段高亮的文本来表示。
项目选择
文本选择

用于选择数据的全局手势是:在同一位置长按、触摸或按住鼠标不放。在触摸设备上,双指触摸也可以触发选择。
复选框或自定义的类似组件,应仅用于表示完成任务,例如勾选列表中的项目。
复选框行为:
避免将复选框作为每个项目的固定组成部分持续显示。
项目选择允许用户对选中的项目执行操作。
在触摸设备上,可以通过长按选择项目。
要退出选择模式,请取消选择所有项目,或使用工具栏对已选项目执行操作。
在触摸设备上,通过长按选择一个项目。
点击项目可在选中和未选中状态之间切换。
长按并拖动光标以选择多个项目。
选中项目后,点击该项目可切换其选中状态。
用户可以长按并拖动光标来选择多个项目。
桌面端
在桌面端切换选择状态时,将鼠标悬停在项目上以显示可点击的勾选标记。
在桌面端,用户可以点击并拖动复选框来选择多个项目。
要指示项目已被选中,请显示与该项目或其关联头像重叠的勾选标记和半透明遮罩。
如果空间允许,可用勾选标记替换图标或头像。
使用紧凑的勾选标记,尽量减少对显示内容的遮挡。
.
文本选择通过高亮一段连续的文本来指示。
在移动设备上,选中的文本开头和结尾各有一个选择手柄。与文本相关的操作会显示在紧贴选择区域上方但不重叠的下拉菜单中。
用户可通过以下方式调整选中的文本:
键盘快捷键 | 结果 |
Shift+左/右方向键 | 逐字符选择 |
Shift+上/下方向键 | 逐行选择 |
Ctrl/Command+A | 全选 |
文本选择快捷键可用于更改选择范围。

文本选择手柄示例

文本选择手柄示例
文本选择元素可使用调色板中的强调色。
选中的文本应清晰易读,与背景颜色对比明显。此外,也可以通过轮廓、文本样式处理、动效或勾选标记图标来指示选中的文本。
在webaim.org了解更多关于对比度的信息(或使用颜色对比度检查器)。


文本选择可使用调色板中的强调色进行自定义。

文本选择 - 亮色主题

文本选择 - 暗色主题
浮动工具栏出现在选择区域上方,包含剪切、复制、粘贴及更多主要操作。当用户点击更多图标时,工具栏会折叠并转换为二级菜单以显示其他操作。
浮动工具栏文本使用 Roboto Medium 字体,大小为 14sp,并全部大写。

选择区域上方的下拉菜单显示剪切、复制、粘贴和更多操作。

更多

当用户选择更多时,菜单开始转换以显示溢出项。

溢出菜单项包括:分享、搜索和翻译

文本选择
下拉菜单高度:44dp
下拉菜单文本顶部内边距:12dp
下拉菜单文本底部内边距:14dp
下拉菜单文本左侧内边距:24dp
下拉菜单项之间的间距:32dp
所选文本顶部内边距:8dp
展开图标右侧内边距:16dp
展开图标左侧内边距:22dp
展开图标上下内边距:10dp
文本选择手柄:22 x 22dp