国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

認識一下 Material Design Lite 布局組件

MadPecker / 1101人閱讀

摘要：布局組件需要按特定的結構進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側欄菜單布局組件簡化了創建可伸縮頁面的過程。

一、布局/Layout

MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應不同的瀏覽器、 屏幕尺寸和設備。

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


...
...
...

需要指出的是，在一個布局聲明中，header等子元素不一定全部使用，比如你可以不要 側欄菜單：


...
...

布局組件簡化了創建可伸縮頁面的過程。確切的說，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，導航塊由一個導航容器 和若干導航鏈接構成：

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

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

mdl-layout-spacer可以自動地填充行容器（mdl-layout__header-row） 的剩余空間（扣除title和navigation的寬度），因此可以簡單地實現為：


    title

配置選項

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

四、頭部 - 選項卡/Tabs

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

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


    
    

        
        tab-1
        tab-2
        tab-3

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


    
    
...

    
...

    
...

配置選項

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來強制顯示側拉菜單（在小尺寸 屏幕下，側拉菜單總是隱藏的）:


    
...

在側拉菜單中也可以使用導航，這時所有的鏈接自動按垂直方向排列：

配置選項

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

免費的在線練習參考：http://www.hubwiz.com/course/55adae643ad79a1b05dcbf77

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49627.html

相關文章

  • 認識一下 Material Design Lite 布局組件

    摘要：布局組件需要按特定的結構進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側欄菜單布局組件簡化了創建可伸縮頁面的過程。 一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應不同的瀏覽器、 屏幕尺寸和設備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

    wanglu1209 評論0 收藏0

  • Top 15 - Material Design框架和類庫(譯)

    摘要：這是一個用于構建響應式應用和網站的前端框架。是基于設計的一套豐富的組件。這是一個對混合式手機應用框架的擴展庫。到目前為止它僅大小，而且不依賴于任何第三方的插件，它可以很輕量的被用來創建和應用。 _Material design_是Google開發的，目的是為了統一公司的web端和手機端的產品風格。它是基于很多的原則，比如像合適的動畫，響應式，以及顏色和陰影的使用。完整的指南詳情請看這里...

    Cristic 評論0 收藏0

發表評論

0條評論

MadPecker

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<