...
...
...
資訊專欄INFORMATION COLUMN
摘要：布局組件需要按特定的結(jié)構(gòu)進(jìn)行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側(cè)欄菜單布局組件簡化了創(chuàng)建可伸縮頁面的過程。
一、布局/Layout
MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應(yīng)不同的瀏覽器、 屏幕尺寸和設(shè)備。
布局/Layout組件需要按特定的HTML結(jié)構(gòu)進(jìn)行聲明：
... ... ...
需要指出的是，在一個布局聲明中，header等子元素不一定全部使用，比如你可以不要 側(cè)欄菜單：
... ...
布局組件簡化了創(chuàng)建可伸縮頁面的過程。確切的說，MDL可以根據(jù)屏幕的尺寸設(shè)定樣式類 的不同顯示效果：
桌面——當(dāng)屏幕寬度大于840px時，MDL按桌面環(huán)境應(yīng)對
平板——當(dāng)屏幕尺寸大于480px，但小于840px時，MDL按平板環(huán)境應(yīng)對。比如，自動隱藏 header、drawer區(qū)域等
手機——當(dāng)屏幕尺寸小于480px時，MDL按手機環(huán)境應(yīng)對
配置選項
| MDL class | 說明 |
|---|---|
| mdl-layout | 聲明元素為布局組件 |
| mdl-js-layout | 為布局實現(xiàn)基本的行為邏輯 |
| mdl-layout__header | 聲明元素為布局頭/header元素 |
| mdl-layout__drawer | 聲明元素為側(cè)欄菜單/drawer元素 |
| mdl-layout__content | 聲明元素為布局內(nèi)容/content元素 |
| mdl-layout--fixed-drawer | 將側(cè)欄菜單/drawer聲明為固定式 |
| mdl-layout--fixed-header | 將頭部/header聲明為固定式 |
| mdl-layout--large-screen-only | 在小尺寸屏幕上隱藏頭部/header |
| mdl-layout--overlay-drawer-button | 為布局添加激活側(cè)欄菜單按鈕 |
二、頭部/Header
布局組件的header子元素由一系列header-row組成：
配置選項
| MDL class | 說明 |
|---|---|
| mdl-layout__header-row | 聲明元素為行容器 |
| mdl-layout-title | 聲明元素為標(biāo)題 |
| mdl-layout-icon | 聲明元素為菜單圖標(biāo) |
| mdl-layout-spacer | 聲明元素自動填充行容器剩余空間 |
| mdl-layout__header--transparent | 聲明布局頭為透明背景 |
| mdl-layout__header--scroll | 聲明布局頭為可滾動 |
| mdl-layout__header--waterfall | 對多行標(biāo)題，當(dāng)滾動內(nèi)容時，僅顯示第一行 |
三、頭部 - 導(dǎo)航/Navigatoin
在header子元素內(nèi)可以使用導(dǎo)航/navigation，導(dǎo)航塊由一個導(dǎo)航容器 和若干導(dǎo)航鏈接構(gòu)成：
如上例所示，導(dǎo)航塊使用nav元素建立。在頭部的導(dǎo)航塊自動按水平排列各 鏈接項。
一個常見的UI模式是標(biāo)題居左，導(dǎo)航居右，如下圖所示：
mdl-layout-spacer可以自動地填充行容器（mdl-layout__header-row） 的剩余空間（扣除title和navigation的寬度），因此可以簡單地實現(xiàn)為：
title
配置選項
| MDL class | 說明 |
|---|---|
| mdl-navigation | 聲明元素為MDL導(dǎo)航組 |
| mdl-navigation__link | 聲明錨點元素為MDL導(dǎo)航鏈接 |
四、頭部 - 選項卡/Tabs
在布局的頭部可以嵌入選項欄/tab-bar，內(nèi)容區(qū)域可以嵌入選項面板/tab-panel。當(dāng)用戶點擊 選項欄中的鏈接/tab*時，自動顯示對應(yīng)的選項面板：
在布局頭部聲明選項欄，需要遵循特定的HTML結(jié)構(gòu)：
在布局的內(nèi)容區(qū)域聲明選項面板，也依賴于特定的HTML結(jié)構(gòu)：
配置選項
| MDL class | 說明 |
|---|---|
| mdl-layout__tab-bar | 聲明元素為選項欄 |
| mdl-layout__tab | 聲明錨點元素為選項鏈接 |
| mdl-layout__tab-panel | 聲明元素為選項面板 |
| is-active | 將選項鏈接/tab或選項面板/tab-panel聲明為激活 |
| mdl-layout--fixed-tabs | 將頭部tab條聲明為固定式 |
五、側(cè)拉菜單/Drawer
側(cè)拉菜單默認(rèn)情況下是隱藏的，需要用戶點擊按鈕：
可以設(shè)置修飾樣式類mdl-layout--fixed-drawer來強制顯示側(cè)拉菜單（在小尺寸 屏幕下，側(cè)拉菜單總是隱藏的）:
...
在側(cè)拉菜單中也可以使用導(dǎo)航，這時所有的鏈接自動按垂直方向排列：
配置選項
| MDL class | 說明 |
|---|---|
| mdl-layout__drawer | 聲明元素為側(cè)欄菜單/drawer元素 |
| mdl-layout-title | 聲明元素為標(biāo)題 |
| mdl-navigation | 聲明元素為MDL導(dǎo)航組 |
| mdl-navigation__link | 聲明錨點元素為MDL導(dǎo)航鏈接 |
| mdl-layout--fixed-drawer | 將側(cè)欄菜單/drawer聲明為固定式 |
免費的在線練習(xí)參考：http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111148.html
摘要：布局組件需要按特定的結(jié)構(gòu)進(jìn)行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側(cè)欄菜單布局組件簡化了創(chuàng)建可伸縮頁面的過程。 一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應(yīng)不同的瀏覽器、 屏幕尺寸和設(shè)備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
摘要：這是一個用于構(gòu)建響應(yīng)式應(yīng)用和網(wǎng)站的前端框架。是基于設(shè)計的一套豐富的組件。這是一個對混合式手機應(yīng)用框架的擴(kuò)展庫。到目前為止它僅大小，而且不依賴于任何第三方的插件，它可以很輕量的被用來創(chuàng)建和應(yīng)用。 _Material design_是Google開發(fā)的，目的是為了統(tǒng)一公司的web端和手機端的產(chǎn)品風(fēng)格。它是基于很多的原則，比如像合適的動畫，響應(yīng)式，以及顏色和陰影的使用。完整的指南詳情請看這里...
閱讀 1198·2021-11-10 11:35
閱讀 2925·2021-09-24 10:35
閱讀 2957·2021-09-22 15:38
閱讀 2807·2019-08-30 15:43
閱讀 1338·2019-08-29 18:39
閱讀 2557·2019-08-29 15:22
閱讀 2789·2019-08-28 18:17
閱讀 611·2019-08-26 13:37
