Material Design Lite，簡潔驚豔的前端工具箱 之 佈局組件。

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，博客地址爲http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習你們能夠去試試。

1、佈局/Layout

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

 

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

<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__drawer">...</any>
<any class="mdl-layout__content">...</any>
</any>

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

<any class="mdl-layout mdl-js-layout">
<any class="mdl-layout__header">...</any>
<any class="mdl-layout__content">...</any>
</any>

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

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

配置選項

MDL class	說明
mdl-layout	聲明元素爲佈局組件
mdl-js-layout	爲佈局實現基本的行爲邏輯
mdl-layout__header	聲明元素爲佈局頭/header元素
mdl-layout__drawer	聲明元素爲側欄菜單/drawer元素
mdl-layout__content	聲明元素爲佈局內容/content元素
mdl-layout--fixed-drawer	將側欄菜單/drawer聲明爲固定式
mdl-layout--fixed-header	將頭部/header聲明爲固定式
mdl-layout--large-screen-only	在小尺寸屏幕上隱藏頭部/header
mdl-layout--overlay-drawer-button	爲佈局添加激活側欄菜單按鈕

2、頭部/Header

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

配置選項

 

MDL class	說明
mdl-layout__header-row	聲明元素爲行容器
mdl-layout-title	聲明元素爲標題
mdl-layout-icon	聲明元素爲菜單圖標
mdl-layout-spacer	聲明元素自動填充行容器剩餘空間
mdl-layout__header--transparent	聲明佈局頭爲透明背景
mdl-layout__header--scroll	聲明佈局頭爲可滾動
mdl-layout__header--waterfall	對多行標題，當滾動內容時，僅顯示第一行

 

3、頭部 - 導航/Navigatoin

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

<div class="mdl-layout__header-row">
    <!--導航容器-->
    <nav class="mdl-navigation">
        <!--導航連接-->
        <a href="...">link</a>
        <a href="...">link</a>
        <a href="...">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>

配置選項

 

MDL class	說明
mdl-navigation	聲明元素爲MDL導航組
mdl-navigation__link	聲明錨點元素爲MDL導航連接

4、頭部 - 選項卡/Tabs

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

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

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

配置選項

MDL class	說明
mdl-layout__tab-bar	聲明元素爲選項欄
mdl-layout__tab	聲明錨點元素爲選項連接
mdl-layout__tab-panel	聲明元素爲選項面板
is-active	將選項連接/tab或選項面板/tab-panel聲明爲激活
mdl-layout--fixed-tabs	將頭部tab條聲明爲固定式

 

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">
    <nav class="mdl-navigation">
        <a href="..." class="mdl-navigation__link">link 1</a>
        <a href="..." class="mdl-navigation__link">link 2</a>
    </nav>
</div>

配置選項

 

MDL class	說明
mdl-layout__drawer	聲明元素爲側欄菜單/drawer元素
mdl-layout-title	聲明元素爲標題
mdl-navigation	聲明元素爲MDL導航組
mdl-navigation__link	聲明錨點元素爲MDL導航連接
mdl-layout--fixed-drawer	將側欄菜單/drawer聲明爲固定式

 

網站上有對應每一小節的在線練習你們能夠去試試。