AngularDart Material Design 应用布局

自述

应用布局
应用程序布局是一个样式，指令和组件系统，当它们一块儿使用时，能够提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏，抽屉和导航样式。

构建

样式由包提供：angular_components/app_layout / layout.scss.css。 要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值便可。 建议在任何特定于组件的样式以前添加样式，以便您能够根据须要轻松覆盖样式值。

@Component(
    selector: 'my-component',
    templateUrl: 'my_component.html',
    styleUrls: const [
      'package:angular_components/app_layout/layout.scss.css',
      'my_component.scss.css'])
class MyComponent {}

应用栏

应用栏具备如下类，能够一块儿使用来建立标题：

class	描述
material-header	头部标题的容器元素。
shadow	材质标题上的修饰符能够将阴影应用于标题。
dense-header	使主要使用鼠标和键盘界面的应用栏更加密集。
material-header-row	标题中的一行。
material-drawer-button	行中的一个按钮位于左侧，用于导航。
material-header-title	头部的标题。
material-spacer	占用标题和任何导航连接之间的空间。 须要在标题以后和任何导航元素以前放置。
material-navigation	导航元素将显示在头部的左侧。 仅使用锚标签，material-button内置本身的样式。

这是一个例子：

<header class="material-header">
  <div class="material-header-row">
    <material-button icon
        class="material-drawer-button" (trigger)="drawer.toggle()">
      <material-icon icon="menu"></material-icon>
    </material-button>
    <span class="material-header-title">Simple Layout</span>
    <div class="material-spacer"></div>
    <nav class="material-navigation">
      <a>Link 1</a>
    </nav>
    <nav class="material-navigation">
      <a>Link 2</a>
    </nav>
    <nav class="material-navigation">
      <a>Link 3</a>
    </nav>
  </div>
</header>

抽屉

有三种抽屉可供选择：固定性，持久性和临时性。全部抽屉都由material-drawer元件实例化。这些抽屉的实现方式不一样，为每种抽屉提供最佳性能。对于抽屉外部的主要内容，将其包装在material-content元件中或具备material-content样式类的元素中。

固定性抽屉

固定性抽屉是不能关闭的抽屉。 它们彻底由CSS提供。 要具备固定性抽屉，请将material属性添加到material-drawer元件。 例：

<material-drawer permanent>
  <!-- Drawer content here -->
</material-drawer>
<material-content>
  <!-- Content goes here -->
</material-content>

持久性抽屉

持久抽屉是能够经过动做打开和关闭的抽屉，例如按钮触发器。这些抽屉从新定位内容以适应抽屉的流动。要使用持久性抽屉，请将persistent 属性添加到material-drawer元素，并将MaterialPersistentDrawerDirective添加到父级的指令列表中。

最后，将打开/关闭抽屉动做连系到抽屉。使用引用变量语法最容易完成。持久抽屉指令将其自身导出为抽屉，这容许其它操做能够轻松使用它。toggle()可用于打开/关闭抽屉。抽屉支持deferredConent指令，容许开发人员在抽屉不可见（关闭）时从页面添加/删除内容。这是一个完整的示例：

<material-drawer persistent #drawer="drawer">
  <div *deferredContent>
    <!-- Drawer content goes here -->
  </div>
</material-drawer>
<material-content>
  <header class="material-header shadow">
    <div class="material-header-row">
      <!-- This button will toggle (open/close) the drawer -->
      <material-button icon
          class="material-drawer-button" (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <!-- Other header info goes here -->
    </div>
  </header>
  <div>
    Content goes here.
  </div>
</material-content>

临时抽屉

临时抽屉是居住内容顶部的抽屉。它们由MaterialTemporaryDrawerComponent提供，它具备与其余抽屉相似的外观。要使用临时抽屉，请将temporary属性添加到material-drawer元素，并将MaterialTemporaryDrawerComponent添加到父级的指令列表中。

临时抽屉具备可选的overlay属性，可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。

这是一个例子：

<material-drawer temporary #drawer="drawer" overlay>
  <div *deferredContent>
    Here is some drawer content.
  </div>
</material-drawer>
<material-content>
  <header class="material-header shadow">
    <div class="material-header-row">
      <material-button class="material-drawer-button" icon
                       (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <span class="material-header-title">Mobile Layout</span>
      <div class="material-spacer"></div>
    </div>
  </header>
  <!-- Content goes here -->
</material-content>

在另外一侧显示抽屉

全部抽屉都有一个HTML属性end，它将抽屉定位在页面的另外一侧，正常（LTR的右侧，RTL的左侧）。

例子：

<material-drawer temporary end>
  <!-- This drawer is going to be on the right side in LTR,
       left side in RTL. -->
</material-drawer>

应用栏和抽屉交互

应用栏和抽屉协同工做，为应用程序提供全面的应用布局。应用栏能够存在于material-content以内或以外。若是它在material-content以内，它将与内容一块儿使用，而且若是适用，则与内容从新定位。若是它位于material-content之上，则抽屉和内容将位于应用栏下方，用于固定性和持久性抽屉。

例：

<header class="material-header shadow">
  <div class="material-header-row">
    <material-button icon
        class="material-drawer-button" (trigger)="drawer.toggle()">
      <material-icon icon="menu"></material-icon>
    </material-button>
    <span class="material-header-title">Simple Layout</span>
    <div class="material-spacer"></div>
    <nav class="material-navigation">
      <a>Link 1</a>
    </nav>
  </div>
</header>
<material-drawer persistent #drawer="drawer">
  <!-- Drawer content here -->
</material-drawer>
<material-content>
  <!-- Content here -->
</material-content>

导航样式

抽屉中的导航元素样式也由app_layout提供。 这是使用标准material-list组件和一些特殊的CSS类来完成的。

顶级抽屉内容应该是具备可选组元素的MaterialListComponent，这些元素由元素上的group属性指定。

mat-drawer-spacer CSS类是可选的，并确保若是标题位于material-content内，则抽屉内容将从标题的底部开始。

将MaterialListItemComponents用于抽屉中的条目。对于每一个组，若是您须要组上的标签，请在组元素内直接使用块元素上的label属性。

这是一个例子：

<material-drawer permanent>
  <material-list *deferredContent>
    <!-- Position the start of the drawer content correctly -->
    <div group class="mat-drawer-spacer"></div>
    <!-- Here is a group without a label -->
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <!-- This group has a label -->
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>

因为样式封装，若是列表内容不是直接在抽屉中（也就是说，它包含在另外一个组件中），则必须使用mixin提供上面的样式。

示例scss抽屉内容组件：

@import 'third_party/dart_src/acx/app_layout/lib/mixins';

:host {
  @include mat-drawer-list-items;
}

MaterialPersistentDrawerDirective

Selector: <material-drawer[persistent]>

Exported as: drawer

能够固定打开或关闭的持久抽屉。

须要在包含组件的styleUrls列表中包含packages：angular_components/app_layout / layout.scss.css。

适用于延期内容。

Inputs:

• visible bool 

  抽屉的可见性。

Outputs:

• visibleChange Stream<bool> 

  抽屉的可见性发生变化时触发事件。

  注意：直到动画完成后才会触发。

MaterialTemporaryDrawerComponent

Selector: <material-drawer[temporary]>

Exported as: drawer

能够打开和关闭的临时抽屉。

适用于延期内容。

Inputs:

• visible bool 

  抽屉的可见性。

Outputs:

• visibleChange Stream<bool> 

  抽屉的可见性发生变化时触发事件。

  注意：直到动画完成后才会触发。

MaterialStackableDrawerComponent

Selector: <material-drawer[stackable]>

可堆叠的临时抽屉，能够打开和关闭。

当可堆叠抽屉打开时，任何现有的可堆叠抽屉将被展开以填充背景中的屏幕。

适用于延期内容。

Inputs:

• visible bool 

  抽屉的可见性。

• isExpanded bool
  当抽屉扩展到全屏时，“True”。

Outputs:

• visibleChange Stream<bool> 

  抽屉的可见性发生变化时触发事件。

  注意：直到动画完成后才会触发。

MaterialDrawerExample

MaterialDrawerMobileExample

MaterialStackingDrawerExample

见演示(最后)，见源码。