菜单表找出父菜单下所有子菜单_Material Design 菜单

菜单显示瞬态材料表上的选项列表。

菜单在与按钮,动作或其他控件交互时出现。它们显示一个选项列表,每行一个选项。可以被滚动。
如果不适用于特定上下文,则可以禁用菜单项。上下文菜单根据应用程序的当前状态动态更改其可用菜单项。

用法

菜单是与按钮,动作,指针或其他控件交互时出现的临时材料。它包含至少两个菜单项。

每个菜单项都包含一个离散选项或操作,可以影响视图中的应用程序,视图或选定元素。

不应将菜单用作应用内导航的主要方法

1e2775f8b3f4193d5a90bbc9a7d6bbc5.png
此操作溢出菜单包含五个菜单项:“刷新”,“设置”,“发送反馈”,“帮助”和“注销”。

菜单标签

按钮或控件的标签应简明准确地反映菜单中的项目。菜单栏通常使用单个单词作为标签,如“文件”,“格式”和“编辑”。其他上下文可能需要更长的标签。

禁用菜单选项

菜单显示一组一致的菜单项。可以基于应用程序的当前状态启用或禁用菜单项。

f0edd99bf92ae5a145bba5b5be9b1520.png

上下文菜单

上下文菜单根据应用程序的当前状态动态更改其可用菜单项。

  • 可以删除与当前上下文无关的菜单项
  • 可以禁用相关但需要满足某些条件的菜单项。例如,选择文本时,“复制”菜单选项将启用。

单个菜单项状态

某些应用状态可能会导致仅包含单个菜单项的上下文菜单。例如,当突出显示网页上的文本时,Android仅显示“复制”菜单项,因为用户无法剪切或粘贴文本。

21d4aa54ad189f55ccf51177ae854875.png
上下文菜单

菜单是可滚动的

如果菜单的高度阻止显示所有菜单项,则菜单可以在内部滚动。一个示例是在横向上观看电话上的菜单时。

621e81faf789322970487b00e0b07ccb.png

级联菜单(仅限桌面)

对于级联菜单,根据屏幕边缘的接近程度垂直和水平定位菜单。

开发人员注意:此组件的实现可能因平台而异。通过使用标准平台实施,您将获得任何相关的未来改进。

5a67de737eed0ce99f520e876b16fe98.png

菜单项

单行显示

每个菜单项仅限于一行文本(单个单词或短语),用于描述选中时将执行的操作。

菜单项还可能包含:

  • 图标和帮助文本,如键盘快捷键
  • 像复选标记一样控制以指示多个选定的项目或状态

菜单订购

具有静态内容的菜单应该在菜单顶部放置最常用的菜单项。

具有动态内容的菜单可能具有其他行为,例如将以前使用的字体放在菜单的顶部。订单可以根据用户操作进行更改。

菜单嵌套

菜单项可以显示嵌套的子菜单。理想情况下,将嵌套限制在一个深度,因为可能很难导航多个嵌套子菜单。

b6420133a871642d1cfa06c5d143f817.png
菜单项的示例

禁用的行动

将操作显示为已禁用而不是将其删除,可让用户知道它们在适当的条件下存在。

例如,当没有要重做的东西时,Redo被禁用。在选择内容之前,禁用剪切和复制。

44288a493ac7b81fafac8d7327093487.png
禁用操作的示例

行为

地点
菜单显示在所有其他应用内UI元素之上。

114099f896e9adcfc540b51e230c707d.png
显示在所有其他应用内UI元素上的菜单示例。

菜单位于其发光元件上方,使得当前选择的菜单项出现在发光元件的顶部。

6db6eb7495fd0831252a5c933f996586.png
当前选择的菜单项出现在发光元素上。

解雇菜单

通过点击菜单外部或点击发射按钮(如果可见)来关闭菜单。

选择菜单项也应该忽略菜单。例外情况是菜单允许选择多个项目,例如,使用复选标记。

简单的菜单

手机或平板电脑

使用列表中的简单菜单显示特定列表项的选项。

垂直对齐

当靠近屏幕边缘时,简单的菜单垂直重新对齐,使所有菜单项都完全可见。

消歧:与简单菜单相比,简单对话框可以显示与列表项可用选项相关的其他详细信息,或提供与主任务相关的导航或正交操作。虽然它们可以显示相同的内容,但简单的菜单比简单的对话框更受欢迎,因为简单的菜单对用户的当前上下文的破坏性较小。

项目选择

选择一个选项会立即提交该选项并关闭菜单。

取消选择

触摸菜单外部或按系统返回按钮,取消操作并关闭菜单。

edf8c0a2af01c0dad4be7a173e5db484.png
简单菜单的示例

打开时,简单菜单会尝试将当前选定的菜单项与列表项垂直对齐。当前选择的菜单项突出显示。

0552093c4ddacc8afd0e4b431b7c5f29.png
当前选定的菜单项在列表项上垂直对齐。

当靠近屏幕边缘时,简单菜单会重新定位其垂直对齐方式,以便所有菜单项都完全可见。

f0e1cab78bd108926cea9ad1ea8e94a2.png
当前选择的菜单项通常位于列表项上,但因为在这种情况下这样做会导致部分菜单出现在屏幕外,整个菜单会垂直重新定位。

简单的菜单出现在它们的发光元素上,而不是下面

1d470220892ed126ccbfc61f0bbfe182.png
简单菜单出现在其发光元素上。

菜单宽度因字符串长度而异,移动设备定义为56dp单位的倍数。

简单菜单始终在屏幕的左右边缘保持16dp边距(手机)或24dp边距(平板电脑)。

614a74fc546523796e41c3e81f2697c6.png
简单的菜单,左右两侧有16dp的边距。移动设备上的最小宽度= 2 * 56dp = 112dp

6773c50c82d250f21590e2b30784824e.png
简单的菜单,左右两侧有16dp的边距。移动设备上的最大宽度(纵向和横向)= 5 * 56dp = 280dp


简单菜单始终与列表项文本的开头左对齐,并且不会根据触摸位置水平重新定位。

54101f93c4e5dd6e47437460776ed962.png
无论触摸位置如何,简单菜单都是左对齐的。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值