MDL佈局組件

MDL佈局組件

參考代碼

1. 佈局/Layout

MDL的佈局/Layout組件用來做爲整個頁面其餘元素的容器，能夠自動適應不一樣的瀏覽器、 屏幕尺寸和設備。

佈局/Layout組件須要按特定的HTML結構進行聲明：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header"></header>
    <div class="mdl-layout__drawer"></div>
    <main class="mdl-layout__content"></main>
</div>

須要指出的是，在一個佈局聲明中，header等子元素不必定所有使用，好比你能夠不要側欄菜單：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header"></header>
    <main class="mdl-layout__content"></main>
</div>

佈局組件簡化了建立可伸縮頁面的過程。確切的說，MDL能夠根據屏幕的尺寸設定樣式類的不一樣顯示效果：

• 桌面 - 當屏幕寬度大於840px時，MDL按桌面環境應對

• 平板 - 當屏幕尺寸大於480px，但小於840px時，MDL按平板環境應對。好比，自動隱藏 header、drawer區域等

• 手機 - 當屏幕尺寸小於480px時，MDL按手機環境應對

2. 頭部/Header

佈局組件的header子元素由一系列header-row組成：

3. 頭部 - 導航/Navigation

在header子元素內可使用導航/navigation，導航塊由一個導航容器和若干導航連接構成：

<div class="mdl-layout__header-row">
    <!--導航容器-->
    <nav class="mdl-navigation">
        <!--導航連接-->
        <a class="mdl-navigation__link" href="javascript:void (0);">Link</a>
        <a class="mdl-navigation__link" href="javascript:void (0);">Link</a>
        <a class="mdl-navigation__link" href="javascript:void (0);">Link</a>
    </nav>
</div>

如上例所示，導航塊使用nav元素創建。在頭部的導航塊自動按水平排列各連接項。

一個常見的UI模式是標題居左，導航居右，以下圖所示：

mdl-layout-spacer能夠自動地填充行容器（mdl-layout__header-row） 的剩餘空間（扣除title和navigation的寬度），所以能夠簡單地實現爲：

<div class="mdl-layout__header-row">
    <span class="mdl-layout-title">title</span>
    <div class="mdl-layout-spacer"></div>
    <nav class="mdl-navigation">...</nav>
</div>

4. 頭部 - 選項卡/Tabs

在佈局的頭部能夠嵌入選項欄/tab-bar，內容區域能夠嵌入選項面板/tab-panel。當用戶點擊選項欄中的連接/tab*時，自動顯示對應的選項面板：

在佈局頭部聲明選項欄，須要遵循特定的HTML結構：

<header class="mdl-layout__header">
    <!--聲明選項欄-->
    <div class="mdl-layout__tab-bar">
        <!--聲明選項，經過href綁定對應的面板，對要激活的選項聲明is-active-->
        <a class="mdl-layout__tab is-active" href="#panel-1">tab-1</a>
        <a class="mdl-layout__tab" href="#panel-2">tab-2</a>
        <a class="mdl-layout__tab" href="#panel-3">tab-3</a>
    </div>
</header>

在佈局的內容區域聲明選項面板，也依賴於特定的HTML結構：

<main class="mdl-layout__content">
    <!--聲明選項面板，使用id屬性指定錨點，對要初始顯示的面板聲明is-active-->
    <div class="mdl-layout__tab-panel is-active" id="panel-1">...</div>
    <div class="mdl-layout__tab-panel" id="panel-2">...</div>
    <div class="mdl-layout__tab-panel" id="panel-3">...</div>
</main>

5. 側拉菜單/Drawer

側拉菜單默認狀況下是隱藏的，須要用戶點擊按鈕：

能夠設置修飾樣式類mdl-layout--fixed-drawer來強制顯示側拉菜單（在小尺寸屏幕下，側拉菜單老是隱藏的）:

<div class="mdl-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">...</div>
</div>

在側拉菜單中也可使用導航，這時全部的連接自動按垂直方向排列：

<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <div class="mdl-navigation">
        <a class="mdl-navigation__link" href="javascript:void(0);">Link 1</a>
        <a class="mdl-navigation__link" href="javascript:void(0);">Link 2</a>
    </div>
</div>