Учебники

Material Design Lite — Меню

Январь 31, 2019

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

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

лея кнопки

Идентифицирует кнопку как компонент MDL и требуется для элемента кнопки.

2

лея-JS-кнопка

Устанавливает базовое поведение MDL для кнопки и требуется для элемента кнопки.

3

лея кнопки — значок

Устанавливает значок для кнопки и является обязательным для элемента кнопки.

4

Материально-иконка

Идентифицирует span как значок материала и требуется для встроенного элемента.

5

лея меню

Определяет неупорядоченный контейнер списка как компонент MDL и требуется для элемента ul.

6

лея-JS-меню

Устанавливает базовое поведение MDL в меню и требуется для элемента ul.

7

лея-menu__item

Определяет кнопки как опции меню MDL и устанавливает базовое поведение MDL, необходимое для элементов элемента списка.

8

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

Устанавливает эффект щелчка пульсации для ссылок опций и является необязательным; требуется для неупорядоченного элемента списка.

9

лея меню — верхний левый

Устанавливает положение меню над кнопкой, выравнивает левый край меню с кнопкой и является необязательным; требуется для неупорядоченного элемента списка.

10

(никто)

По умолчанию меню расположено под кнопкой, выравнивается по левому краю с помощью кнопки.

11

лея меню — верхний правый

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

12

лея меню — нижний правый

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

лея кнопки

Идентифицирует кнопку как компонент MDL и требуется для элемента кнопки.

лея-JS-кнопка

Устанавливает базовое поведение MDL для кнопки и требуется для элемента кнопки.

лея кнопки — значок

Устанавливает значок для кнопки и является обязательным для элемента кнопки.

Материально-иконка

Идентифицирует span как значок материала и требуется для встроенного элемента.

лея меню

Определяет неупорядоченный контейнер списка как компонент MDL и требуется для элемента ul.

лея-JS-меню

Устанавливает базовое поведение MDL в меню и требуется для элемента ul.

лея-menu__item

Определяет кнопки как опции меню MDL и устанавливает базовое поведение MDL, необходимое для элементов элемента списка.

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

Устанавливает эффект щелчка пульсации для ссылок опций и является необязательным; требуется для неупорядоченного элемента списка.

лея меню — верхний левый

Устанавливает положение меню над кнопкой, выравнивает левый край меню с кнопкой и является необязательным; требуется для неупорядоченного элемента списка.

(никто)

По умолчанию меню расположено под кнопкой, выравнивается по левому краю с помощью кнопки.

лея меню — верхний правый

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

лея меню — нижний правый

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

пример

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

mdl_menu.htm

Live Demo

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

Результат

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

38
Share: