Учебники

Материал Дизайн Lite — Кнопки

Январь 31, 2019

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

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

лея кнопки

Устанавливает кнопку как компонент MDL, обязательно.

2

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

Добавляет базовое поведение MDL для кнопки, обязательно.

3

(никто)

Устанавливает эффект плоского дисплея на кнопку по умолчанию.

4

лея-кнопка — приподнятая

Устанавливает эффект повышенного отображения; это взаимоисключающие с fab, mini-fab и icon.

5

лея-кнопка — ФАБ

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

6

лея-кнопка — мини-разборная

Устанавливает эффект отображения мини-fab (маленький потрясающий круговой); это взаимоисключающий режим с пометкой «поднято», «потрясающе» и «значок».

7

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

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

8

лея кнопка — цветные

Устанавливает цветной эффект отображения, где цвета определены в material.min.css.

9

лея-кнопка — первичная

Устанавливает эффект отображения основного цвета, где цвета определены в material.min.css.

10

лея-кнопка — акцент

Устанавливает эффект отображения цвета акцента, где цвета определены в material.min.css.

11

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

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

лея кнопки

Устанавливает кнопку как компонент MDL, обязательно.

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

Добавляет базовое поведение MDL для кнопки, обязательно.

(никто)

Устанавливает эффект плоского дисплея на кнопку по умолчанию.

лея-кнопка — приподнятая

Устанавливает эффект повышенного отображения; это взаимоисключающие с fab, mini-fab и icon.

лея-кнопка — ФАБ

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

лея-кнопка — мини-разборная

Устанавливает эффект отображения мини-fab (маленький потрясающий круговой); это взаимоисключающий режим с пометкой «поднято», «потрясающе» и «значок».

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

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

лея кнопка — цветные

Устанавливает цветной эффект отображения, где цвета определены в material.min.css.

лея-кнопка — первичная

Устанавливает эффект отображения основного цвета, где цвета определены в material.min.css.

лея-кнопка — акцент

Устанавливает эффект отображения цвета акцента, где цвета определены в material.min.css.

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

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

пример

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

mdl_buttons.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">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Результат

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

38
Share: