Drawer抽屉

用于在屏幕边缘显示应用导航等内容的面板。

规则

• 是 Android 推荐的导航方式，常见于该平台应用。

代码演示

基本用法

遮罩层模式

import { Component } from '@angular/core';
@Component({
  selector: 'demo-drawer-basic',
  template: `
    <div>
      <Navbar [icon]="icon" (onLeftClick)="onOpenChange($event)">Basic</Navbar>
      <Drawer class="my-drawer"
              [ngStyle]="{minHeight: this.height+'px'}"
              [contentStyle]="{ color: '#A6A6A6', textAlign: 'center', paddingTop: '42px' }"
              [enableDragHandle]="true"
              [sidebar]="sidebar"
              [open]="this.state.open"
              (onOpenChange)="onOpenChange($event)"
      >
        Click upper-left corner
      </Drawer>
    </div>
    <ng-template #icon>
      <Icon type="ellipsis"></Icon>
    </ng-template>
    <ng-template #sidebar>
      <List>
        <ListItem [multipleLine]="true"
                  [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'">
          Category
        </ListItem>
        <ListItem *ngFor="let num of this.nums ; let i = index"
                  [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'">
          Category{{i + 1}}
        </ListItem>
      </List>
    </ng-template>
  `,
  styles: [
    `
      /deep/ .my-drawer {
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      /deep/ .my-drawer .am-drawer-sidebar {
        background-color: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      /deep/ .my-drawer .am-drawer-sidebar .am-list {
        width: 300px;
        padding: 0;
      }
    `
  ]
})
export class DemoDrawerBasicComponent {
  height: number = document.documentElement.clientHeight;
  nums: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  state = {
    open: true
  };
  constructor() {}
  onOpenChange(event) {
    console.log(event);
    this.state.open = !this.state.open;
  }
}

嵌入文档模式

嵌入到文档流中

import { Component } from '@angular/core';
@Component({
  selector: 'demo-drawer-dock',
  template: `
    <div>
      <Navbar [icon]="icon" (onLeftClick)="onDockedChange($event)">Docked in document</Navbar>
      <Drawer class="my-drawer"
              [ngStyle]="{minHeight: this.height+'px'}"
              [contentStyle]="{ color: '#A6A6A6', textAlign: 'center', paddingTop: '42px' }"
              [sidebarStyle]="{ border: '1px solid #ddd' }"
              [sidebar]="sidebar"
              [enableDragHandle]="false"
              [docked]="this.state.docked"
              (onOpenChange)="onDockedChange($event)"
      >
        Click upper-left corner
      </Drawer>
    </div>
    <ng-template #icon>
      <Icon type="ellipsis"></Icon>
    </ng-template>
    <ng-template #sidebar>
      <List>
        <ListItem [multipleLine]="true"
                  [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'">
          Category
        </ListItem>
        <ListItem *ngFor="let num of this.nums ; let i = index"
                  [thumb]="'https://zos.alipayobjects.com/rmsportal/eOZidTabPoEbPeU.png'">
          Category{{i + 1}}
        </ListItem>
      </List>
    </ng-template>
  `,
  styles: [
    `
      /deep/ .my-drawer {
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      /deep/ .my-drawer .am-drawer-sidebar {
        background-color: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }
      /deep/ .my-drawer .am-drawer-sidebar .am-list {
        width: 300px;
        padding: 0;
      }
    `
  ]
})
export class DemoDrawerDockComponent {
  height: number = document.documentElement.clientHeight;
  nums: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  state = {
    docked: false
  };
  constructor() {}
  onDockedChange = event => {
    console.log('dockedChanged', event);
    this.state.docked = !this.state.docked;
  };
}

API