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

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

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

лея-мега-сноска

Определяет контейнер как мега-нижний компонент MDL. Требуется для элемента нижнего колонтитула.

лея-мега-footer__top сечение

Определяет контейнер как верхнюю часть нижнего колонтитула. Требуется для верхнего раздела «внешний» элемент div.

лея-мега-footer__left сечение

Определяет контейнер как левый раздел. Требуется для левого раздела «внутренний» элемент div.

лея-мега-footer__social-BTN

Определяет декоративный квадрат в мега-нижнем колонтитуле. Требуется для элемента кнопки (если используется).

лея-мега-footer__right сечение

Определяет контейнер как правильный раздел. Требуется для правого раздела «внутренний» элемент div.

лея-мега-footer__middle сечение

Определяет контейнер как среднюю часть нижнего колонтитула. Требуется для средней секции «внешнего» элемента div.

лея-мега-footer__drop вниз сечение

Определяет контейнер как раскрывающуюся (вертикальную) область содержимого. Требуется для выпадающих «внутренних» элементов div.

лея-мега-footer__heading

Определяет заголовок как заголовок мега-нижнего колонтитула. Требуется для элемента h1 внутри раскрывающегося списка.

лея-мега-footer__link-лист

Определяет неупорядоченный список как раскрывающийся (вертикальный) список. Требуется для элемента ul внутри выпадающего раздела.

лея-мега-footer__bottom сечение

Определяет контейнер как нижнюю часть нижнего колонтитула. Требуется для нижнего раздела «внешний» элемент div.

лея-логотип

Определяет контейнер как стилизованный заголовок раздела. Требуется для «внутреннего» элемента div в нижней части мега-нижнего колонтитула или в левой части мини-нижнего колонтитула.

лея мини-сноска

Определяет контейнер как компонент мини-футера MDL. Требуется для элемента нижнего колонтитула.

лея мини-footer__left сечение

Определяет контейнер как левый раздел. Обязательный для левого раздела «внутренний» элемент div.

лея-мини-footer__link-лист

Определяет неупорядоченный список как встроенный (горизонтальный) список. Требуется для родственного элемента ul к элементу div «mdl-logo».

лея мини-footer__right сечение

Определяет контейнер как правильный раздел. Требуется для правого раздела «внутренний» элемент div.

лея мини-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-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

Live Demo

<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>

<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>