2019-1-22 侧边栏sidenav

侧边框： sidenav
抽屉： drawer
sidenav 组件用于增加side content 到全屏应用
The sidenav components are designed to add side content to a fullscreen app.

---

要建立侧边栏，我们需要用到三个组件：

<mat-sidenav-container> 用来为主要内容和侧边栏提供一个结构容器；
<mat-sidenav-content> 用来表示主要内容；
<mat-sidenav> 用于表示附属内容。

drawer 组件用于在给应用中的一小部分添加附属内容。
The drawer component is designed to add side content to a small section of your app.

要建立抽屉，我们需要用到三个组件：

<mat-drawer-container>
<mat-drawer-content>
<mat-drawer>

---

设置属性

1. position 属性：

1. 指定主内容该放在附属内容的哪一端。
2. 可取值： start 或 end
   在从左到右书写的语言中下，分别表示把主内容main放在附属内容sidenav的左侧或右侧。
   即：
   end： sidenav 左侧， main 右侧
3. 默认值是 start
   opened mode="side" position="end"

2. 打开或关闭 mat-sidenav 的方法

1. open()、close() 和 toggle()

3. 打开或关闭 mat-sidenav 属性

1. opened / closed

4. mode 属性

1. 侧边栏和主内容的打开方式
2. 可取值： over / push / side
3. 默认值： over
4. side 并排显示，push /over 均会遮住背景主内容

5. 禁止点击背景自动关闭侧边栏

1. 设置属性 disableClose

6. 设置打开侧边栏的大小

mat-sidenav {
width: 200px;
}

7. fixedInViewport 属性

1. 功能： 开启固定定位
2. <mat-sidenav> 只支持固定定位方式（<mat-drawer> 不限）
   [fixedInViewport]="options.value.fixed" [fixedTopGap]="options.value.top"
   [fixedBottomGap]="options.value.bottom">

8. role 属性

1. <mat-sidenav> 和 <mat-sidenav-content> 都应该设置role 属性
2. <mat-sidenav> ：
   • 包含其它页面的链接
     role="navigation"
   • 包含目录
     role="directory"
   • 没有特别的角色
     role="region"
3. <mat-sidenav-content> :
   • 页面的主要内容
     role="main"
   • 没有角色
     role="region"

---

它们分别是各个侧边栏组件的等价物。
侧边栏会把应用的附属内容作为整体添加进来，而抽屉只在为应用中的一小部分添加附属内容。
它们所支持的大部分特性都一样，但抽屉不支持固定定位方式。

1. 无论主内容还是附属内容(main and side content)，都应该放在 <mat-sidenav-container> 的内部，而那些你不希望被侧边栏影响到的内容（比如头或脚），可以放在该容器的外部。

• side content
  附属内容应该包装在 <mat-sidenav> 元素中。
  它的 position 属性可以指定主内容该放在附属内容的哪一端. 它可以是 start 或 end，在从左到右书写的语言中下，分别表示把主内容放在附属内容的左侧或右侧。 如果没有指定 position，则其默认值是 start。
  <mat-sidenav-container> 最多可以拥有两个 <mat-sidenav> 元素，但每一侧只能有一个。
  <mat-sidenav> 必须作为 <mat-sidenav-container> 的直属子节点出现。

• main content
  主要内容应该包裹在 <mat-sidenav-content> 中，如果没有为 <mat-sidenav-container> 指定 <mat-sidenav-content>，则会隐式创建一个，并把 <mat-sidenav-container> 中除了 <mat-sidenav> 元素之外的内容都放进去。

1. 打开和关闭侧边栏 opening and closing a sidenav

1. <mat-sidenav> 可以使用 open()、close() 和 toggle()方法来打开或关闭。
   它们都会返回一个 Promise<boolean>，当侧边栏打开之后它会解析为 true，关闭之后解析为 false。

2. <mat-sidenav> 也支持一些输出属性：(opened) 表示刚刚打开，(closed) 表示刚刚关闭。

3. <mat-sidenav> mode 属性
   over 侧边栏浮在主内容上方，并用一个背景遮住主内容
   push 侧边栏把主内容挤出去，并用一个背景遮住主内容
   side 侧边栏和主内容并排显示，并收缩主内容的宽度，给侧边栏腾出空间
   如果没有指定 mode，则默认为 over。
   这可以通过 mat-sidenav-container 上的 hasBackdrop 属性进行设置sidenav 背景。
   显式把 hasBackdrop 设置为 true 或 false 将会为侧边栏改写默认的背景可见性。

4. 点击背景或按下 Esc 键通常会关闭侧边栏。 可以通过设置 <mat-sidenav> 或 <mat-drawer> 上的 disableClose 属性来禁用这种自动关闭的行为。

   1. 可以通过给 <mat-sidenav> 添加 keydown 监听器来定制 Esc 处理器。
   2. 可以通过 <mat-sidenav-container> 的输出属性 (backdropClick) 来定制点击背景的处理器。

5. <mat-sidenav> 只支持固定定位方式（<mat-drawer> 不限）
   它可以通过设置 fixedInViewport 属性进行启用。 另外，还可以通过 fixedTopGap 和 fixedBottomGap 来设置顶部和底部的空白。这些属性可以接受一个像素值来指定要加到顶部或底部的空白尺寸。

6. <mat-sidenav> 和 <mat-sidenav-content> 都应该根据它们的上下文给出一个合适的 role 属性。

比如，包含到其它页面的链接的 <mat-sidenav> 可以标记为 role="navigation"，而包含目录的则应该标记为 role="directory"。 如果没有什么特别的角色来描述这个侧边栏，建议使用 role="region"。

同样，<mat-sidenav-content> 也应该基于其包含的内容来指定角色。如果它表示页面的主要内容，就应该标记为 role="main"。 如果没办法指定合理的角色，同样可以用 role="region" 作为回退值。

<mat-sidenav-container>     
<mat-sidenav #sidenav  mode="side"  (opened)="events.push(' open! ')" 
(closed)="evnts.push(' close ! ')"
> 
 <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-drawer mode="side" opened>Drawer content</mat-drawer>
 <mat-sidenav mode="side">Start content</mat-sidenav>
  <mat-sidenav opened mode="side" position="end">End content</mat-sidenav>
 <mat-sidenav #sidenav (keydown.escape)="close('escape')" disableClose>

可访问性

<mat-sidenav> 和 <mat-sidenav-content> 都应该根据它们的上下文给出一个合适的 role 属性。
包含到其它页面的链接的 <mat-sidenav> 可以标记为 role="navigation"，
而包含目录的则应该标记为 role="directory"。
如果没有什么特别的角色来描述这个侧边栏，建议使用 role="region"