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

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，博客地址為http://www.cnblogs.com/jasonnode/ 。網站上有對應每一小節的在線練習大家可以去試試。

一、布局/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	為布局添加激活側欄菜單按鈕

二、頭部/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	對多行標題，當滾動內容時，僅顯示第一行

 

三、頭部 - 導航/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導航鏈接

四、頭部 - 選項卡/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條聲明為固定式

 

五、側拉菜單/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聲明為固定式

 

網站上有對應每一小節的在線練習大家可以去試試。