[Angular Material完全攻略] Day 08 -

转载
今天我们要来讲Angular Material的Menu元件，Menu可以说是非常具有历史性的功能，使用机会也不低，只要有一系列的选择要浓缩在一个范围内时，就是使用Menu的好时机，接下来就让我们看看Angular Material强大的Menu元件吧！

关于Material Design中的Menu

在Material Design的Menu设计指南中，Menu可以用来显示一系列的选项，每一列就是一个选项，通常由一个按钮，或一个简单的文字label开始，在画面上进行立体的呈现，而不会影响到其他元素的排版。

在桌面应用上Menu可以是多层串接的，在行动装置或平板上则建议一层简单的Menu就好，另外Menu的选项也应该是可以被disable的。

图片来源：https://material.io/guidelines/components/menus.html#

使用Angular Material的Menu元件

要使用Menu元件，首先要先加入MatMenuModule。

使用mat-menu

我们使用<mat-menu?来为原来toolbar的message icon加上Menu选单，首先我们可以再任意地方加入<mat-menu>与<mat-menu-item>组合的选单。

<mat-menu #messageMenu="matMenu">
  <button mat-menu-item>最新讯息</button>
  <button mat-menu-item>讯息设定</button>
</mat-menu>

这时候画面上还不会有任何资料，还需需要一个可以触发显示选单的来源，我们加在toolbar上的message icon上

<button mat-icon-button [matMenuTriggerFor]="messageMenu" #menuTrigger="matMenuTrigger">
  <mat-icon>message</mat-icon>
</button>

上面程式我们透过matMenuTriggerFor来设定这个按钮会触发哪一个menu元件，这时候我们可以执行看看结果：

image

点击看看原来的message icon按钮，可以发现menu选单就跳出来啦！这时候我们可以使用上下键来切换focus的选项，也可以按下Enter键来触发按钮的click事件，操作上超级方便的！

在程式中开启选单

要在程式中开启选单很容易，只要找到matMenuTriggerFor，再触发他的openMenu()方法就可以打开menu，透过closeMenu()则能够动态的关闭menu，另外我们也可以透过toggleMenu()来开关menu的显示状态

<button mat-raised-button (click)="menuTrigger.toggleMenu()">开启讯息设定</button>

效果如下：

image

使用xPosition和yPosition调整选单出现位置

<mat-menu>预设会在出现时把整个menuTrigger覆盖掉，同时也会根据目前所在的位置来决定选单生长的方向，例如按钮在画面的右边的话，选单预设会往左边长，在画面上方的话，选单预设会往下长，总之就是会尽量让整个menu在画面中可以被看到就对了，我们可以能够透过xPosition和yPosition，来控制生长的方向

• xPosition：选项为after(预设值、从start往end的方向长，通常是从左到右)或before(从end往start的方向长，通常是从右到左)。
• yPosition：选项为below(预设值、从上往下长)或above(从下往上长)

举例来说，一个没有设定xPosition和yPosition，且生长方向没有阻碍时的程式码和画面如下：

<div style="text-align:center">
  <button mat-raised-button [matMenuTriggerFor]="positionMenu">开启讯息设定，这是一条比较长的按钮，好确认Menu的生长方向</button>
  <mat-menu #positionMenu="matMenu">
    <button mat-menu-item>讯息1</button>
    <button mat-menu-item>讯息2</button>
  </mat-menu>
</div>

image

当我们调整xPosition和yPosition如下时：

<mat-menu #positionMenu="matMenu" xPosition="before" yPosition="above">
  <button mat-menu-item>讯息1</button>
  <button mat-menu-item>讯息2</button>
</mat-menu>

可以看到生长的方向就变了，有趣的是当我们往下卷动萤幕时，由于menu即将碰到顶端，会立刻改爲往下生长，尽可能让选单可以被看到，只能说Angular Material既贴心又聪明啊！

image

同样的当生长方向收到阻碍时，Angular Material会自动帮我们计算要成长的方向

<!-- 按钮在画面的很上方，即使设定往上长，当上方空间不足时，会自动往下生长 -->
<mat-menu #positionMenu="matMenu" xPosition="before" yPosition="above">
  <button mat-menu-item>讯息1</button>
  <button mat-menu-item>讯息2</button>
  ...
  <button mat-menu-item>讯息5</button>
</mat-menu>

image

另外，我们也可以设定[overlapTrigger]="false"，如此一来，选单就永远不会遮住我们的trigger：

<mat-menu #messageMenu="matMenu" [overlapTrigger]="false">
  <button mat-menu-item>最新讯息</button>
  <button mat-menu-item>讯息设定</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="messageMenu" #menuTrigger="matMenuTrigger">
  <mat-icon>message</mat-icon>
</button>

巢状menu

menu选单可以是巢状的，要使用巢状的选单没有什麽新技巧，一样把子选单使用<mat-menu>设计好，然后在原来的选单选项中加入matMenuTriggerFor即可：

<button mat-raised-button [matMenuTriggerFor]="positionMenu">巢状选单demo</button>
<mat-menu #positionMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">讯息1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">讯息2</button>
  <button mat-menu-item>讯息3</button>
</mat-menu>

<mat-menu #subMenu1="matMenu">
  <button mat-menu-item>
    <mat-icon>person</mat-icon>
    讯息 1-1
  </button>
  <button mat-menu-item>
    <mat-icon>favorite</mat-icon>
    讯息 1-2
  </button>
  <button mat-menu-item>
    <mat-icon>thumb_up</mat-icon>
    讯息 1-3
  </button>
</mat-menu>

<mat-menu #subMenu2="matMenu">
  <button mat-menu-item>
    <mat-icon>delete</mat-icon>
    讯息 2-1
  </button>
  <button mat-menu-item disabled>
    <mat-icon>settings</mat-icon>
    讯息 2-2
  </button>
</mat-menu>

我们在这边顺便搭配了<mat-icon>以及尝试为button加入disabled属性，可以看到搭配上完全都没有问题，排版依然很顺畅，同时我们也能使用左右键切换子选单：

image

小技巧：搭配使用mat-divider

当要呈现的选单多的时候，除了选择用巢状的选单以外，用一个divider分隔也是个不错的选择，可以减少子项目难以分类的烦恼，在行动装置的呈现上也会比较清楚。

还记得我们在昨天介绍List时有提到一个<mat-divider>吗？虽然官方的Menu文件没有提到，但<mat-divider>其实一样可以在<mat-menu>中使用：

<mat-menu #positionMenu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">讯息1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">讯息2</button>
  <mat-divider></mat-divider>
  <button mat-menu-item>讯息3</button>
</mat-menu>

成果如下，一条分隔线就出现啦：

image

当然，你还是必须要载入MatListModule才可以。

本日小结

关于Menu的使用基本上不会很困难，但实用性却很高，要调整显示风格也不会是太困难的事情。

Angular Material在Menu的设计上非常用心，儘管是web application，但在操作上我们依然可以轻鬆地使用方向键来切换不同的选项，同时也可以使用Enter来确认执行选项，可以说是非常贴心方便的设计！

介绍到这边，整个基本的后台画面就已经大致上成形了！明天开始我们将花几天的时间透过一个问卷调查的页面，来介绍Angular Material中各种不同的表单元件的使用，这些表单元件都有很丰富的动态效果，但使用上非常显示明确，不会被这些效果给混淆，敬请期待吧！！

本日的程式码GitHub：https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-08-menu

分支：day-08-menu

相关资源

• Material Design - Menus
• Angular Material - Menu

后话

不知不觉，这系列文章已经超过50个人订阅了，真的是对我很大的一个鼓励，也不白费我每篇文章都花3个小时左右绞尽脑汁的写出来，在这边感谢各位订阅者，也感谢有在下面留言发问、提供意见的朋友，让我更有信心把这系列写下去！最后虚荣的祈祷一下完赛前订阅数可以破百吧XD