Intro 简介
与常规按钮不同，菜单按钮具有一个可触发下拉菜单的展开图标。引入菜单按钮是为了解决动作面板的诸多限制。默认情况下，菜单位于按钮下方，但如果没有足够的空间，也可以在上方显示。
Usage 用法
请使用菜单按钮，如果：
您需要一个提供多个选项的菜单。尽可能使用菜单按钮而不是动作面板，因为它提供了更多选项。
请不要使用菜单按钮，如果：
Responsiveness and Adaptiveness 响应性和适应性
-
在智能手机（尺寸为 S）上，菜单在全屏对话框中显示。按钮标签将成为对话框的标题。页脚包含「取消」按钮。可通过「返回」按钮来导航。
菜单按钮 - S
- 在平板和桌面设备（尺寸为 M/L）上，菜单按钮会触发级联下拉菜单。
菜单按钮，常规和分割模式 - M/L
Layout 布局
菜单按钮由一个带标签的按钮和一个指示菜单的展开图标组成。
菜单按钮有两种不同的模式：
- 常规按钮模式（默认）：菜单按钮显示为一个常规按钮。用户点击它可打开菜单。在常规模式中，您可以在标签描述前面使用图标。
-
分割按钮模式：菜单按钮显示为一个分割按钮。用户点击按钮可激活菜单的默认操作，点击箭头可打开菜单。
分割按钮被分割成两个区域：标签和图标。它们之间的分隔符表示这两个区域会导致不同的操作。分割按钮支持常规按钮的强调、正向和负向状态。
分割按钮可组合一系列不同的命令，尤其是当其中一个命令使用得更频繁时。
在分割模式中，标签取决于默认操作。如果默认操作仅显示图标，则所有菜单项都必须包含图标。
紧凑模式下的纯文本菜单按钮
舒适模式下的纯文本菜单按钮
紧凑模式下的纯图标菜单按钮
舒适模式下的纯图标菜单按钮
有关舒适和紧凑模式的更多信息，请参阅 content density（内容密度）。
宽度和截断
如果未设置固定宽度，按钮宽度将根据文本和容器自动设置。菜单按钮的最大宽度为 12 rem（192 px）。
如果标签很长，最大宽度可确保菜单按钮和菜单的宽度一致。
达到最大宽度或设置固定的宽度后，文本将被截断。
带截断文本的菜单按钮
Types 类型
常规菜单按钮
常规类型（默认）：用户点击按钮以打开菜单。
常规菜单按钮
分割菜单按钮
用户点击按钮以触发默认操作。点击箭头图标可打开菜单。
分割菜单按钮
Components 组件
菜单按钮由一个带标签和（或）图标的按钮和一个表示菜单可用的展开图标组成。
在分割模式中，标签和展开图标这两个基本元素是分开的。
菜单按钮组件
Behavior and Interaction 行为和交互
在平板和桌面设备上
菜单按钮显示当前实现的下拉菜单。
- 如果用户点击菜单按钮，将显示下拉菜单。
- 如果用户选择了一个菜单项，将触发该操作并关闭菜单。
- 当用户点击菜单以外的区域，或在菜单打开的情况下再次点击按钮，菜单将关闭。
- 下拉菜单的显示必须与菜单按钮直接联系。
- 默认情况下，下拉菜单必须位于菜单按钮下方。如果按钮下方没有足够的空间，可将其显示在菜单按钮上方。
在智能手机上
菜单在全屏对话框中打开。按钮的标签成为对话框的标题。
- 为允许用户导航出菜单，请在页脚中使用「取消」按钮。
- 具有子菜单的项目可导航。导航气泡浮层中使用的导航类似，其中提供「返回」按钮。
- 当重新打开对话框时，它将在顶层重新启动。
分割按钮
点击标签区域将触发两种类型的行为之一，应用开发者可单独配置此操作：
- 它始终触发由应用开发人员设置的默认操作。如果未定义默认项，则菜单列表中的第一项将成为默认项。
- 它触发用户选择的最后一个操作。最初，它是默认操作，直到用户做出不同的选择，该选择才成为默认操作。按钮标签相应地改变。按钮具有固定的尺寸，如果菜单项过长，则会截断文本（与组合框相同）。
展开图标
如果用户点击展开图标，将打开下拉菜单。
Styles 样式
菜单按钮支持按钮的所有状态。
默认
透明
幽灵
正向
负向
强调
原文：Menu Button | SAP Fiori Design Guidelines
备注：文章内容翻译自 SAP - Fiori Design Guidelines。翻译包含个人理解，仅作为个人学习笔记使用。如有错误，求指正呀，非常感谢 ^^
网友评论