Material Design Lite - нижние колонтитулы

Компонент нижнего колонтитула MDL бывает двух основных форм: mega-footer и mini-footer. Мега-нижний колонтитул содержит более сложное содержание, чем мини-нижний колонтитул. Мега-нижний колонтитул может представлять несколько разделов контента, разделенных горизонтальными правилами, тогда как мини-нижний колонтитул представляет собой один раздел контента. Нижние колонтитулы обычно содержат как информационное, так и интерактивное содержимое, например ссылки.

MDL предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений к мега-нижнему и мини-нижнему колонтитулам. В следующей таблице перечислены доступные классы и их эффекты.

Sr. No.	Имя и описание класса
1	mdl-mega-footer Определяет контейнер как компонент мегафутера MDL. Обязательно для элемента нижнего колонтитула.
2	mdl-mega-footer__top-section Определяет контейнер как верхнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div верхней части.
3	mdl-mega-footer__left-section Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции.
4	mdl-mega-footer__social-btn Обозначает декоративный квадрат в мегафутере. Обязательно для элемента кнопки (если используется).
5	mdl-mega-footer__right-section Определяет контейнер как правую секцию. Требуется для "внутреннего" элемента div правого раздела.
6	mdl-mega-footer__middle-section Определяет контейнер как средний раздел нижнего колонтитула. Требуется для "внешнего" элемента div средней части.
7	mdl-mega-footer__drop-down-section Определяет контейнер как раскрывающуюся (вертикальную) область содержимого. Требуется для раскрывающихся «внутренних» элементов div.
8	mdl-mega-footer__heading Определяет заголовок как заголовок мегафутера. Обязательно для элемента h1 в раскрывающемся разделе.
9	mdl-mega-footer__link-list Определяет неупорядоченный список как раскрывающийся (вертикальный) список. Обязательно для элемента ul в раскрывающемся разделе.
10	mdl-mega-footer__bottom-section Определяет контейнер как нижнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div нижней части.
11	mdl-logo Определяет контейнер как стилизованный заголовок раздела. Требуется для «внутреннего» элемента div в нижней части мегафутера или левой части мини-колонтитула.
12	mdl-mini-footer Определяет контейнер как компонент мини-нижнего колонтитула MDL. Обязательно для элемента нижнего колонтитула.
13	mdl-mini-footer__left-section Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции.
14	mdl-mini-footer__link-list Определяет неупорядоченный список как встроенный (горизонтальный) список. Требуется для элемента ul, родственного элементу div "mdl-logo".
15	mdl-mini-footer__right-section Определяет контейнер как правую секцию. Требуется для "внутреннего" элемента div правого раздела.
16	mdl-mini-footer__social-btn Обозначает декоративный квадрат в нижнем колонтитуле. Обязательно для элемента кнопки (если используется).

Теперь давайте рассмотрим несколько примеров, чтобы понять использование классов нижних колонтитулов MDL для стилизации нижних колонтитулов.

Мега Нижний колонтитул

Давайте обсудим использование mdl-mega-footerдля размещения содержимого в нижнем колонтитуле. В этом примере будут использоваться следующие классы MDL.

mdl-layout - Определяет div как компонент MDL.
mdl-js-layout - Добавляет базовое поведение MDL к внешнему div.
mdl-layout--fixed-header - Делает заголовок всегда видимым, даже на маленьких экранах.
mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.
mdl-layout-title - Определяет текст заголовка макета.
mdl-layout__content - Определяет div как содержимое макета MDL.
mdl-mega-footer - Определяет контейнер как компонент мегафутера MDL.
mdl-mega-footer__top-section - Определяет контейнер как верхнюю часть нижнего колонтитула.
mdl-mega-footer__left-section - Определяет контейнер как левую секцию.
mdl-mega-footer__social-btn - Обозначает декоративный квадрат в нижнем колонтитуле.
mdl-mega-footer__right-section - Определяет контейнер как правую секцию.
mdl-mega-footer__middle-section - Определяет контейнер как средний раздел нижнего колонтитула.
mdl-mega-footer__drop-down-section - Определяет контейнер как раскрывающуюся (вертикальную) область содержимого.
mdl-mega-footer__heading - Определяет заголовок как заголовок мегафутера.
mdl-mega-footer__link-list - Определяет неупорядоченный список как встроенный (горизонтальный) список.
mdl-mega-footer__bottom-section - Определяет контейнер как нижнюю часть нижнего колонтитула.
mdl-logo - Определяет контейнер как стилизованный заголовок раздела.

mdl_megafooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Результат

Проверьте результат.

Мини-нижний колонтитул

Следующий пример поможет вам понять использование mdl-mini-footer для размещения содержимого в нижнем колонтитуле.

В этом примере будут использоваться классы MDL, приведенные ниже.

mdl-layout - Определяет div как компонент MDL.
mdl-js-layout - Добавляет базовое поведение MDL к внешнему div.
mdl-layout--fixed-header - Делает заголовок всегда видимым, даже на маленьких экранах.
mdl-layout__header-row - Определяет контейнер как строку заголовка MDL.
mdl-layout-title - Определяет текст заголовка макета.
mdl-layout__content - Определяет div как содержимое макета MDL.
mdl-mini-footer - Определяет контейнер как компонент мини-нижнего колонтитула MDL.
mdl-mini-footer__left-section - Определяет контейнер как левую секцию.
mdl-logo - Определяет контейнер как стилизованный заголовок раздела.
mdl-mini-footer__link-list - Определяет неупорядоченный список как встроенный (горизонтальный) список.
mdl-mini-footer__right-section - Определяет контейнер как правую секцию.

mdl_minifooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Результат

Проверьте результат.