Учебники

Материал Дизайн Лайт — Карты

Январь 31, 2019

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

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

лея-карты

Идентифицирует элемент div как контейнер карты MDL, необходимый для «внешнего» div.

2

лея-карты — граница

Помещает границу в раздел карты, к которому она применяется и используется на «внутренних» элементах div.

3

mdl-shadow — 2dp через mdl-shadow — 16dp

Устанавливает переменную глубину тени (2, 3, 4, 6, 8 или 16) для карты и является необязательной, идет на «внешний» div; если опущено, тень не отображается.

4

лея-card__title

Идентифицирует div как контейнер заголовка карты и требуется для «внутреннего» заголовка div.

5

лея-card__title-текст

Помещает соответствующие текстовые характеристики в заголовок карты и требуется для заголовка (H1 — H6) внутри заголовка div.

6

лея-card__subtitle-текст

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

7

лея-card__media

Идентифицирует div как контейнер медиа-карты и требуется для «внутреннего» медиа-блока.

8

лея-card__supporting-текст

Идентифицирует div как контейнер основного текста карты и присваивает соответствующие характеристики текста основному тексту и требуется для «внутреннего» основного текста div; текст идет прямо внутри div без промежуточных контейнеров.

9

MDL-card__actions

Идентифицирует div как контейнер действий карты и присваивает соответствующие текстовые характеристики тексту действий и требуется для «внутренних» действий div; контент идет прямо внутри div без промежуточных контейнеров.

лея-карты

Идентифицирует элемент div как контейнер карты MDL, необходимый для «внешнего» div.

лея-карты — граница

Помещает границу в раздел карты, к которому она применяется и используется на «внутренних» элементах div.

mdl-shadow — 2dp через mdl-shadow — 16dp

Устанавливает переменную глубину тени (2, 3, 4, 6, 8 или 16) для карты и является необязательной, идет на «внешний» div; если опущено, тень не отображается.

лея-card__title

Идентифицирует div как контейнер заголовка карты и требуется для «внутреннего» заголовка div.

лея-card__title-текст

Помещает соответствующие текстовые характеристики в заголовок карты и требуется для заголовка (H1 — H6) внутри заголовка div.

лея-card__subtitle-текст

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

лея-card__media

Идентифицирует div как контейнер медиа-карты и требуется для «внутреннего» медиа-блока.

лея-card__supporting-текст

Идентифицирует div как контейнер основного текста карты и присваивает соответствующие характеристики текста основному тексту и требуется для «внутреннего» основного текста div; текст идет прямо внутри div без промежуточных контейнеров.

MDL-card__actions

Идентифицирует div как контейнер действий карты и присваивает соответствующие текстовые характеристики тексту действий и требуется для «внутренних» действий div; контент идет прямо внутри div без промежуточных контейнеров.

пример

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

mdl_cards.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>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Результат

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

46
Share: