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

見演示(最後)，見源碼。