Учебники

Материал Дизайн Lite — Вкладки

Январь 31, 2019

Компонент вкладки Material Design Lite (MDL) является компонентом пользовательского интерфейса, который помогает эксклюзивно отображать несколько экранов в одном пространстве.

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

Sr.No. Имя класса и описание
1

лея-макет

Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.

2

MDL-закладки

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

3

лея-JS-вкладка

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

4

MDL-JS-эффект пульсации

Добавляет эффект щелчка пульсации к ссылкам вкладки. Необязательный; идет на «внешний» элемент div.

5

лея-tabs__tab-бар

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

6

лея-tabs__tab

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

7

это-активные

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

8

лея-tabs__panel

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

лея-макет

Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.

MDL-закладки

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

лея-JS-вкладка

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

MDL-JS-эффект пульсации

Добавляет эффект щелчка пульсации к ссылкам вкладки. Необязательный; идет на «внешний» элемент div.

лея-tabs__tab-бар

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

лея-tabs__tab

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

это-активные

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

лея-tabs__panel

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

пример

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

Классы 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-tabs — определяет контейнер вкладок как компонент MDL.

  • mdl-js-tabs — устанавливает базовое поведение MDL для контейнера вкладок.

  • mdl-tabs__tab-bar — определяет контейнер как панель ссылок вкладок MDL.

  • mdl-tabs__tab — определяет привязку (ссылку) в качестве активатора вкладок MDL.

  • is-active — определяет вкладку как вкладку отображения по умолчанию.

  • mdl-tabs__panel — определяет контейнер как содержимое вкладки.

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-tabs — определяет контейнер вкладок как компонент MDL.

mdl-js-tabs — устанавливает базовое поведение MDL для контейнера вкладок.

mdl-tabs__tab-bar — определяет контейнер как панель ссылок вкладок MDL.

mdl-tabs__tab — определяет привязку (ссылку) в качестве активатора вкладок MDL.

is-active — определяет вкладку как вкладку отображения по умолчанию.

mdl-tabs__panel — определяет контейнер как содержимое вкладки.

mdl_tabs.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">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>   
   </body>
</html>

Результат

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

42
Share: