Angular Material 教程之佈局篇 (一) : 佈局簡介

寫這篇文章的時候 Angular Material 版本爲 1.1.1 基於 Angular v1, 基於 Angular 2 的 Angular Material 2 仍在 Alpha 階段.

佈局簡介

概覽

Angular Material 的佈局特性能夠使開發人員可以更輕鬆地基於 CSS3 flexbox 之上建立現代的響應式佈局。佈局API包含一組 Angular 指令,能夠應用於任何應用程序的HTML內容。

使用 HTML指令 做爲API提供了一個簡單的方法來設置一個值(例如。layout="row"),有助於分離焦點:屬性用來定義佈局而CSS類用來指定樣式。

HTML 標記 API	容許的值（原值或插值）
layout	row column
flex	整數（0%->100%之間5的倍數, 100%/3, 200%/3）
flex-order	-20 到 20 之間的整數
flex-offset	整數（0%->95%之間5的倍數, 100%/3, 200%/3）
layout-align	start center end space-around space-between / start center end stretch
layout-fill	-
layout-wrap	-
layout-nowrap	-
layout-margin	-
layout-padding	-
show	-
hide	-

然而咱們使用原質化設計中指定的斷點：

咱們能夠使用 斷點別名 來結合斷點與媒體查詢定義：

斷點	媒體查詢 (像素範圍)
xs	'(max-width: 599px)'
gt-xs	'(min-width: 600px)'
sm	'(min-width: 600px) and (max-width: 959px)'
gt-sm	'(min-width: 960px)'
md	'(min-width: 960px) and (max-width: 1279px)'
gt-md	'(min-width: 1280px)'
lg	'(min-width: 1280px) and (max-width: 1919px)'
gt-lg	'(min-width: 1920px)'
xl	'(min-width: 1920px)'

響應斷點API

如今咱們能夠結合斷點別名與佈局API,來更容易的支持斷點響應和咱們的簡單佈局標記。別名只是做爲佈局 API 關鍵字的擴展後綴。

結果就像下表中 layout 和 flex API:

layout API	flex API	激活設備時
layout	flex	設置默認佈局方向 & 除非被另外一個斷點覆蓋。
layout-xs	flex-xs	width < 600px
layout-gt-xs	flex-gt-xs	width >= 600px
layout-sm	flex-sm	600px <= width < 960px
layout-gt-sm	flex-gt-sm	width >= 960px
layout-md	flex-md	960px <= width < 1280px
layout-gt-md	flex-gt-md	width >= 1280px
layout-lg	flex-lg	1280px <= width < 1920px
layout-gt-lg	flex-gt-lg	width >= 1920/b>px
layout-xl	flex-xl	width >= 1920px

下面的代碼中使用了響應式佈局 API:

<div layout="column" class="zero">

  <div flex="33" flex-md="{{ vm.box1Width }}" class="one"></div>
  <div flex="33" layout="{{ vm.direction }}" layout-md="row" class="two">

    <div flex="20" flex-md="10" hide-lg class="two_one"></div>
    <div flex="30px" show hide-md="{{ vm.hideBox }}" flex-md="25" class="two_two"></div>
    <div flex="20" flex-md="65" class="two_three"></div>

  </div>
  <div flex class="three"></div>

</div>

這種佈局API意味着它更容易創建和維護 flexbox 佈局和經過CSS定義的一切。開發人員使用HTML佈局API指定意圖和處理 CSS flexbox 樣式的佈局引擎問題。

當遇到衝突或已知問題,佈局引擎將在控制檯輸出警告日誌。

底層

因爲在 Internet Explorer 瀏覽器中使用屬性選擇器的性能問題,看下面的詳情:

佈局引擎在運行時動態構建類選擇器。而且每一個預約義的佈局 CSS 類名都在 angular-material.css 樣式表中.

開發人員應該保持在HTML標記中使用佈局指令,版本之間的類可能會改變。

讓咱們看看這個 directive-to-className 變換是如何工做的。爲了簡單使用 layout 和 flex 指令(API):

<div>

  <div layout="row">

    <div flex>First item in row</div>
    <div flex="20">Second item in row</div>

  </div>
  <div layout="column">

    <div flex="66">First item in column</div>
    <div flex="33">Second item in column</div>

  </div>

</div>

在運行時,這些屬性會變成CSS類。

<div>

  <div class="ng-scope layout-row">

    <div class="flex">First item in row</div>
    <div class="flex-20">Second item in row</div>

  </div>
  <div class="ng-scope layout-column">

    <div class="flex-33">First item in column</div>
    <div class="flex-66">Second item in column</div>

  </div>

</div>

在 angular-material.css 中用於上面定義的樣式類:

.flex {
      -webkit-flex: 1 1 0%;
          -ms-flex: 1 1 0%;
              flex: 1 1 0%;
      box-sizing: border-box;
    }
    .flex-20 {
      -webkit-flex: 1 1 20%;
          -ms-flex: 1 1 20%;
              flex: 1 1 20%;
      max-width: 20%;
      max-height: 100%;
      box-sizing: border-box;
    }

    .layout-row .flex-33 {
      -webkit-flex: 1 1 calc(100% / 3);
          -ms-flex: 1 1 calc(100% / 3);
              flex: 1 1 calc(100% / 3);
      box-sizing: border-box;
    }

    .layout-row  .flex-66 {
      -webkit-flex: 1 1 calc(200% / 3);
          -ms-flex: 1 1 calc(200% / 3);
              flex: 1 1 calc(200% / 3);
      box-sizing: border-box;
    }

    .layout-row .flex-33 {
      max-width: calc(100% / 3);
      max-height: 100%;
    }

    .layout-row  .flex-66 {
      max-width: calc(200% / 3);
      max-height: 100%;
    }

    .layout-column .flex-33 {
      max-width: 100%;
      max-height: calc(100% / 3);
    }

    .layout-column  .flex-66 {
      max-width: 100%;
      max-height: calc(200% / 3);
    }