材料设计 - 一个搜索字段,两个可用操作

时间:2018-03-13 12:46:31

标签: material-design material-ui

需要设计提示。现在我们有一个搜索字段,有2个操作 - 您可以在其中搜索角色或用户

  1. 如果您搜索用户,则可以复制其(角色)作业或
  2. 如果您搜索某个角色,则可以添加所选角色。
  3. 通常,UI看起来像这样:

    Copy user's assignments

    Add role

    如何为用户简化此UI?

1 个答案:

答案 0 :(得分:1)

我认为你应该在Appbar中添加一个菜单,类似于Layout Structure的Material Design标准的 Menus 部分:

enter image description here enter image description here

上面的图片是从the standard中提取的,但可以在您的情况下使用。

取消单选按钮,并在搜索字段中显示当前搜索上下文及其默认占位符文本。在Appbar中提供一个按钮,用于显示模态菜单。

显示菜单时,向用户提供可用的搜索上下文,允许他们切换。选择后,使用新占位符文本重新呈现搜索字段。它应该清除以前输入的任何内容。

如果由于某种原因将上下文集限制为一个(权限,安全性或其他原因),请在占位符文本中显示该选项并隐藏菜单按钮。