Material Design Lite — Обзор
Material Design Lite (MDL — это библиотека компонентов пользовательского интерфейса, созданная с использованием CSS, JavaScript и HTML. Компоненты пользовательского интерфейса MDL помогают создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, придерживаясь современных принципов веб-дизайна, таких как переносимость браузера, независимость от устройства. и изящная деградация.
Ниже приведены существенные особенности Material Design Lite —
-
Встроенное адаптивное проектирование.
-
Стандартный CSS с минимальной площадью.
-
Включает в себя новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями дизайна материалов.
-
Включает расширенные и специализированные функции, такие как карты, макеты столбцов, ползунки, счетчики, вкладки, типографика и т. Д.
-
Может использоваться с или без какой-либо библиотеки или среды разработки.
-
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Встроенное адаптивное проектирование.
Стандартный CSS с минимальной площадью.
Включает в себя новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями дизайна материалов.
Включает расширенные и специализированные функции, такие как карты, макеты столбцов, ползунки, счетчики, вкладки, типографика и т. Д.
Может использоваться с или без какой-либо библиотеки или среды разработки.
Кросс-браузер, и может быть использован для создания веб-компонентов многократного использования.
Адаптивный дизайн
-
Material Design Lite имеет встроенное адаптивное проектирование, поэтому веб-сайт, созданный с помощью Material Design Lite, будет переделывать себя в соответствии с размером устройства.
-
Классы Material Design Lite созданы таким образом, что сайт может соответствовать любому размеру экрана.
-
Веб-сайты, созданные с использованием Material Design Lite, полностью совместимы с ПК, планшетами и мобильными устройствами.
Material Design Lite имеет встроенное адаптивное проектирование, поэтому веб-сайт, созданный с помощью Material Design Lite, будет переделывать себя в соответствии с размером устройства.
Классы Material Design Lite созданы таким образом, что сайт может соответствовать любому размеру экрана.
Веб-сайты, созданные с использованием Material Design Lite, полностью совместимы с ПК, планшетами и мобильными устройствами.
Стандартный CSS
-
Material Design Lite использует только стандартный CSS, и его очень легко освоить.
-
Нет никакой зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.
-
ExtensibleMaterial Design Lite по дизайну очень минималистичный и плоский.
-
Он разработан с учетом того факта, что добавлять новые правила CSS намного проще, чем перезаписывать существующие правила CSS.
-
Поддерживает тени и жирные цвета.
-
Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.
Material Design Lite использует только стандартный CSS, и его очень легко освоить.
Нет никакой зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.
ExtensibleMaterial Design Lite по дизайну очень минималистичный и плоский.
Он разработан с учетом того факта, что добавлять новые правила CSS намного проще, чем перезаписывать существующие правила CSS.
Поддерживает тени и жирные цвета.
Цвета и оттенки остаются одинаковыми на разных платформах и устройствах.
И самое главное, MDL абсолютно бесплатен в использовании.
Material Design Lite — Настройка среды
Существует два способа использования Material Design Lite —
-
Локальная установка. Вы можете загрузить файлы материалов. {Primary} — {accent} .min.css и material.min.js на свой локальный компьютер и включить их в свой HTML-код.
-
Версия на основе CDN — вы можете включать материалы. {Primary} — {accent} .min.css и material.min.js в ваш HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка. Вы можете загрузить файлы материалов. {Primary} — {accent} .min.css и material.min.js на свой локальный компьютер и включить их в свой HTML-код.
Версия на основе CDN — вы можете включать материалы. {Primary} — {accent} .min.css и material.min.js в ваш HTML-код непосредственно из сети доставки контента (CDN).
Локальная установка
Выполните следующие шаги для установки MDL —
-
Перейдите на https://www.getmdl.io/started/index.html, чтобы загрузить последнюю доступную версию.
-
Затем поместите загруженный файл material.min.js в каталог вашего сайта, например, / js и material.min.css в / css.
Перейдите на https://www.getmdl.io/started/index.html, чтобы загрузить последнюю доступную версию.
Затем поместите загруженный файл material.min.js в каталог вашего сайта, например, / js и material.min.css в / css.
пример
Теперь вы можете включить файлы CSS и JS в ваш HTML-файл следующим образом:
<html> <head> <title>The Material Design Lite Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "material.min.css"> <script src = "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-drawer"> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">Material Design</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">Features</a> <a class = "mdl-navigation__link" href = "">About Us</a> <a class = "mdl-navigation__link" href = "">Log Out</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "page-content" style = "padding-left:100px;">Hello World!</div> </main> </div> </body> </html>
Вышеуказанная программа сгенерирует следующий результат —
CDN основанная версия
Вы можете включить файлы js и css в свой HTML-код непосредственно из сети доставки контента (CDN). storage.googleapis.com предоставляет контент для последней версии.
В этом руководстве мы используем CDN-версию библиотеки storage.googleapis.com.
пример
Теперь давайте перепишем приведенный выше пример, используя material.css и material.js из Google CDN.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
Вышеуказанная программа сгенерирует следующий результат —
Материал Дизайн Лайт — Макеты
В этой главе мы обсудим различные макеты в Material Design Lite. HTML5 имеет следующие элементы контейнера —
-
<div> — Предоставляет общий контейнер для содержимого HTML.
-
<header> — Представляет раздел заголовка.
-
<нижний колонтитул> — представляет раздел нижнего колонтитула.
-
<article> — представляет статьи.
-
<section> — Предоставляет универсальный контейнер для различных типов разделов.
<div> — Предоставляет общий контейнер для содержимого HTML.
<header> — Представляет раздел заголовка.
<нижний колонтитул> — представляет раздел нижнего колонтитула.
<article> — представляет статьи.
<section> — Предоставляет универсальный контейнер для различных типов разделов.
MDL предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений к контейнерам. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-макет Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера. |
| 2 |
MDL-JS-макет Добавляет базовое поведение MDL в макет. Требуется на внешнем элементе контейнера. |
| 3 |
лея-layout__header Определяет контейнер как компонент MDL. Обязательный элемент заголовка. |
| 4 |
лея-макет значок Используется для добавления значка приложения. Переопределяется значком меню, если оба видны. Дополнительный значок элемента. |
| 5 |
MDL-layout__header-строка Определяет контейнер как строку заголовка MDL. Требуется в контейнере содержимого заголовка. |
| 6 |
лея-layout__title Определяет текст заголовка макета. Требуется в заголовке контейнера макета. |
| 7 |
MDL-макет-спейсер Используется для выравнивания элементов внутри заголовка или ящика. Он растет, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов вправо. Необязательный для div следующий заголовок макета. |
| 8 |
лея-навигации Определяет контейнер как группу навигации MDL. Требуется для элемента nav. |
| 9 |
лея-navigation__link Определяет привязку как навигационную ссылку MDL. Требуется для элементов крепления жатки и / или ящика. |
| 10 |
лея-layout__drawer Определяет контейнер как макет MDL. Требуется на элемент контейнера контейнера. |
| 11 |
лея-layout__content Определяет контейнер как содержимое макета MDL. Требуется на основной элемент. |
| 12 |
лея-layout__header — свиток Делает заголовок прокрутки с содержимым. Необязательно для элемента заголовка. |
| 13 |
лея-макет — фиксированный ящик Делает ящик всегда видимым и открытым на больших экранах. Опционально на внешнем элементе контейнера, а не на элементе контейнера выдвижного ящика. |
| 14 |
лея-макет — фиксированный заголовок Делает заголовок всегда видимым, даже на маленьких экранах. Опционально для внешнего элемента контейнера. |
| 15 |
лея-макет — большой экран только Скрывает элемент на экранах меньшего размера. Необязательно для любого потомка mdl-layout. |
| 16 |
лея-макет — маленький экран только Скрывает элемент на больших экранах. Необязательно для любого потомка mdl-layout. |
| 17 |
лея-layout__header — водопад Позволяет эффект «водопад» с несколькими строками заголовка. Необязательно для элемента заголовка. |
| 18 |
лея-layout__header — прозрачный Делает заголовок прозрачным и рисует поверх макета фона. Необязательно для элемента заголовка. |
| 19 |
лея-layout__header — швы Использует заголовок без тени. Необязательно для элемента заголовка. |
| 20 |
лея-layout__tab-бар Определяет контейнер как панель вкладок MDL. Требуется для элемента контейнера внутри заголовка (макет с вкладками). |
| 21 |
лея-layout__tab Определяет якорь как вкладку MDL. Обязательные элементы панели вкладок. |
| 22 |
это-активные Определяет вкладку как активную вкладку по умолчанию. Необязательный элемент привязки панели вкладок и связанный элемент раздела вкладки. |
| 23 |
MDL-layout__tab-панель Определяет контейнер как вкладку панели содержимого. Требуется на вкладке раздел элементов. |
| 24 |
лея-макет — фиксированные вкладки Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательно для внешнего элемента контейнера, а не для контейнера внутри заголовка. |
лея-макет
Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.
MDL-JS-макет
Добавляет базовое поведение MDL в макет. Требуется на внешнем элементе контейнера.
лея-layout__header
Определяет контейнер как компонент MDL. Обязательный элемент заголовка.
лея-макет значок
Используется для добавления значка приложения. Переопределяется значком меню, если оба видны. Дополнительный значок элемента.
MDL-layout__header-строка
Определяет контейнер как строку заголовка MDL. Требуется в контейнере содержимого заголовка.
лея-layout__title
Определяет текст заголовка макета. Требуется в заголовке контейнера макета.
MDL-макет-спейсер
Используется для выравнивания элементов внутри заголовка или ящика. Он растет, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов вправо. Необязательный для div следующий заголовок макета.
лея-навигации
Определяет контейнер как группу навигации MDL. Требуется для элемента nav.
лея-navigation__link
Определяет привязку как навигационную ссылку MDL. Требуется для элементов крепления жатки и / или ящика.
лея-layout__drawer
Определяет контейнер как макет MDL. Требуется на элемент контейнера контейнера.
лея-layout__content
Определяет контейнер как содержимое макета MDL. Требуется на основной элемент.
лея-layout__header — свиток
Делает заголовок прокрутки с содержимым. Необязательно для элемента заголовка.
лея-макет — фиксированный ящик
Делает ящик всегда видимым и открытым на больших экранах. Опционально на внешнем элементе контейнера, а не на элементе контейнера выдвижного ящика.
лея-макет — фиксированный заголовок
Делает заголовок всегда видимым, даже на маленьких экранах. Опционально для внешнего элемента контейнера.
лея-макет — большой экран только
Скрывает элемент на экранах меньшего размера. Необязательно для любого потомка mdl-layout.
лея-макет — маленький экран только
Скрывает элемент на больших экранах. Необязательно для любого потомка mdl-layout.
лея-layout__header — водопад
Позволяет эффект «водопад» с несколькими строками заголовка. Необязательно для элемента заголовка.
лея-layout__header — прозрачный
Делает заголовок прозрачным и рисует поверх макета фона. Необязательно для элемента заголовка.
лея-layout__header — швы
Использует заголовок без тени. Необязательно для элемента заголовка.
лея-layout__tab-бар
Определяет контейнер как панель вкладок MDL. Требуется для элемента контейнера внутри заголовка (макет с вкладками).
лея-layout__tab
Определяет якорь как вкладку MDL. Обязательные элементы панели вкладок.
это-активные
Определяет вкладку как активную вкладку по умолчанию. Необязательный элемент привязки панели вкладок и связанный элемент раздела вкладки.
MDL-layout__tab-панель
Определяет контейнер как вкладку панели содержимого. Требуется на вкладке раздел элементов.
лея-макет — фиксированные вкладки
Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательно для внешнего элемента контейнера, а не для контейнера внутри заголовка.
В следующих примерах показано использование класса mdl-layout для стилизации различных контейнеров.
Фиксированный ящик
Чтобы создать шаблон с фиксированным ящиком, но без заголовка, используются следующие классы MDL.
-
mdl-layout — идентифицирует div как компонент MDL.
-
mdl-js-layout — добавляет базовое поведение MDL во внешний div.
-
mdl-layout — fixed-box — Делает ящик всегда видимым и открытым на больших экранах.
-
mdl-layout__drawer — идентифицирует div как блок макета MDL.
-
mdl-layout-title — Определяет текст заголовка макета.
-
mdl-navigation — определяет div как группу навигации MDL.
-
mdl-navigation__link — Определяет привязку как навигационную ссылку MDL.
-
mdl-layout__content — определяет div как содержимое макета MDL.
mdl-layout — идентифицирует div как компонент MDL.
mdl-js-layout — добавляет базовое поведение MDL во внешний div.
mdl-layout — fixed-box — Делает ящик всегда видимым и открытым на больших экранах.
mdl-layout__drawer — идентифицирует div как блок макета MDL.
mdl-layout-title — Определяет текст заголовка макета.
mdl-navigation — определяет div как группу навигации MDL.
mdl-navigation__link — Определяет привязку как навигационную ссылку MDL.
mdl-layout__content — определяет div как содержимое макета MDL.
mdl_fixeddrawer.htm
<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>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Фиксированный заголовок
Для создания шаблона с фиксированным заголовком используется следующий дополнительный класс MDL.
-
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
mdl_fixedheader.htm
<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>
<!-- Always shows a header, even in smaller screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Фиксированный заголовок и ящик
Для создания шаблона с фиксированным заголовком и фиксированным блоком используются следующие дополнительные классы MDL.
-
mdl-layout — fixed-box — Делает ящик всегда видимым и открытым на больших экранах.
-
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
mdl-layout — fixed-box — Делает ящик всегда видимым и открытым на больших экранах.
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
mdl_fixedheader.htm
<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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = ""
style = "color:gray">Home</a>
<a class = "mdl-navigation__link" href = ""
style = "color:gray">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content">Hello World!</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Заголовок прокрутки
Для создания шаблона с прокручиваемым заголовком используются следующие классы MDL.
-
mdl-layout — header — scroll — делает прокрутку заголовка с содержимым.
mdl-layout — header — scroll — делает прокрутку заголовка с содержимым.
mdl_scrollingheader.htm
<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>
<!-- Uses a header that scrolls with the text, rather than
staying locked at the top -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--scroll">
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Заголовок контракта
Чтобы создать шаблон с заголовком, который сокращается при прокрутке страницы, используется следующий класс MDL.
-
mdl-layout__header — waterfall — позволяет использовать эффект «водопада» с несколькими строками заголовка.
mdl-layout__header — waterfall — позволяет использовать эффект «водопада» с несколькими строками заголовка.
mdl_waterfallheader.htm
<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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout ">
<header class = "mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class = "mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class = "mdl-layout__header-row">
<div class = "mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Фиксированный заголовок с прокручиваемыми вкладками
Для создания шаблона с заголовком, имеющим прокручиваемые вкладки, используются следующие классы MDL.
-
mdl-layout__tab-bar — определяет контейнер как панель вкладок MDL.
-
mdl-layout__tab — определяет привязку как ссылку на вкладку MDL.
-
mdl-layout__tab-panel — определяет контейнер как панель содержимого вкладки.
mdl-layout__tab-bar — определяет контейнер как панель вкладок MDL.
mdl-layout__tab — определяет привязку как ссылку на вкладку MDL.
mdl-layout__tab-panel — определяет контейнер как панель содержимого вкладки.
mdl_scrollabletabheader.htm
<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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Фиксированный заголовок с фиксированными вкладками
Чтобы создать шаблон с заголовком, имеющим фиксированные вкладки, используется следующий дополнительный класс MDL.
-
mdl-layout — fixed-tabs — использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию.
mdl-layout — fixed-tabs — использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию.
mdl_fixedtabheader.htm
<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>
<!-- The drawer is always open in large screens. The header is always
shown, even in small screens. -->
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class = "mdl-layout__header">
<!-- Top row, always visible -->
<div class = "mdl-layout__header-row">
<!-- Title -->
<span class = "mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
<a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
<a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
<a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">HTML5 Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
<div class = "page-content">Tab 1 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
<div class = "page-content">Tab 2 Contents</div>
</section>
<section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
<div class = "page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Материал Дизайн Лайт — Сетки
Сетка Material Design Lite (MDL) — это компонент для размещения контента на экранах разных размеров. Сетка MDL определяется и заключена в элемент контейнера / div. Сетка имеет 12 столбцов на экране размера рабочего стола, 8 на экране размера планшета и 4 на экране размера телефона, где каждый размер имеет предопределенные поля и желоба. Клетки располагаются последовательно в порядке, в котором они определены, за следующими исключениями:
-
Если ячейка сетки не подходит для строки одного из размеров экрана, она переходит в следующую строку.
-
Если ячейка сетки имеет указанный размер столбца, равный или превышающий количество столбцов для размера экрана, она занимает всю строку.
Если ячейка сетки не подходит для строки одного из размеров экрана, она переходит в следующую строку.
Если ячейка сетки имеет указанный размер столбца, равный или превышающий количество столбцов для размера экрана, она занимает всю строку.
MDL предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений к сетке. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-макет Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера. |
| 2 |
лея сетки Определяет контейнер как компонент сетки MDL. Обязательный для «внешнего» элемента div. |
| 3 |
лея-элементная Определяет контейнер как ячейку MDL. Требуется на «внутренние» элементы div. |
| 4 |
лея сетки — нет-разнос Обновляет ячейки сетки, чтобы между ними не было полей. Опционально для сетки контейнера. |
| 5 |
MDL-клеток — N-Col Это помогает установить размер столбца для ячейки на N, N — 1-12 включительно, по умолчанию — 4; необязательно для «внутренних» элементов div. |
| 6 |
MDL-клеток — N-Col-рабочий стол Это помогает установить размер столбца для ячейки на N только в режиме рабочего стола, N — 1-12 включительно; необязательно для «внутренних» элементов div. |
| 7 |
MDL-клеток — N-Col-планшет Это помогает установить размер столбца для ячейки на N только в режиме планшета, N — 1-8 включительно; необязательно для «внутренних» элементов div. |
| 8 |
лея-клеток — N-кол-телефон Это помогает установить размер столбца для ячейки на N только в режиме телефона, N — 1-4 включительно; необязательно для «внутренних» элементов div. |
| 9 |
лея-клетка — прятки рабочий стол Скрывает ячейку в режиме рабочего стола. Необязательно для «внутренних» элементов div. |
| 10 |
лея-клетка — прятки таблетка Скрывает ячейку в режиме планшета. Необязательно для «внутренних» элементов div. |
| 11 |
лея-клетка — прятки телефон Скрывает ячейку в режиме телефона. Необязательно для «внутренних» элементов div. |
| 12 |
MDL-клеток — растяжение Растягивает ячейку по вертикали, чтобы заполнить родительский элемент, по умолчанию; необязательно для «внутренних» элементов div. |
| 13 |
лея-клетки — верхняя Выравнивает ячейку по верху родительского элемента. Необязательно для «внутренних» элементов div. |
| 14 |
лея-клеток — средний Выравнивает ячейку по центру родителя. Необязательно для «внутренних» элементов div. |
| 15 |
лея-элементная — нижний Выравнивает ячейку по низу родителя. Необязательно для «внутренних» элементов div. |
лея-макет
Определяет контейнер как компонент MDL. Требуется на внешнем элементе контейнера.
лея сетки
Определяет контейнер как компонент сетки MDL. Обязательный для «внешнего» элемента div.
лея-элементная
Определяет контейнер как ячейку MDL. Требуется на «внутренние» элементы div.
лея сетки — нет-разнос
Обновляет ячейки сетки, чтобы между ними не было полей. Опционально для сетки контейнера.
MDL-клеток — N-Col
Это помогает установить размер столбца для ячейки на N, N — 1-12 включительно, по умолчанию — 4; необязательно для «внутренних» элементов div.
MDL-клеток — N-Col-рабочий стол
Это помогает установить размер столбца для ячейки на N только в режиме рабочего стола, N — 1-12 включительно; необязательно для «внутренних» элементов div.
MDL-клеток — N-Col-планшет
Это помогает установить размер столбца для ячейки на N только в режиме планшета, N — 1-8 включительно; необязательно для «внутренних» элементов div.
лея-клеток — N-кол-телефон
Это помогает установить размер столбца для ячейки на N только в режиме телефона, N — 1-4 включительно; необязательно для «внутренних» элементов div.
лея-клетка — прятки рабочий стол
Скрывает ячейку в режиме рабочего стола. Необязательно для «внутренних» элементов div.
лея-клетка — прятки таблетка
Скрывает ячейку в режиме планшета. Необязательно для «внутренних» элементов div.
лея-клетка — прятки телефон
Скрывает ячейку в режиме телефона. Необязательно для «внутренних» элементов div.
MDL-клеток — растяжение
Растягивает ячейку по вертикали, чтобы заполнить родительский элемент, по умолчанию; необязательно для «внутренних» элементов div.
лея-клетки — верхняя
Выравнивает ячейку по верху родительского элемента. Необязательно для «внутренних» элементов div.
лея-клеток — средний
Выравнивает ячейку по центру родителя. Необязательно для «внутренних» элементов div.
лея-элементная — нижний
Выравнивает ячейку по низу родителя. Необязательно для «внутренних» элементов div.
пример
Следующий пример поможет вам понять использование класса mdl-grid для размещения содержимого на различных экранах.
Классы MDL, приведенные ниже, будут использованы в этом примере.
-
mdl-layout — идентифицирует div как компонент MDL.
-
mdl-js-layout — добавляет базовое поведение MDL во внешний div.
-
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
-
mdl-layout__header-row — определяет контейнер как строку заголовка MDL.
-
mdl-layout__drawer — идентифицирует div как блок макета MDL.
-
mdl-layout-title — Определяет текст заголовка макета.
-
mdl-navigation — определяет div как группу навигации MDL.
-
mdl-navigation__link — Определяет привязку как навигационную ссылку MDL.
-
mdl-layout__content — определяет div как содержимое макета MDL.
-
mdl-grid — определяет div как компонент сетки MDL.
-
mdl-cell — определяет div как ячейку MDL.
-
mdl-cell — 1-col — Устанавливает размер столбца для ячейки равным 1 ячейке из 12 ячеек в размере экрана рабочего стола.
-
mdl-cell — 2-col — Устанавливает размер столбца для ячейки равным 2 из 12 ячеек в размере экрана рабочего стола.
-
mdl-cell — 4-col — Устанавливает размер столбца для ячейки равным 4 из 12 ячеек в размере экрана рабочего стола.
-
mdl-cell — 6-colo — устанавливает размер столбца для ячейки равным 6 ячейкам из 12 ячеек в размере экрана рабочего стола.
-
mdl-cell — 4-col-phone — Устанавливает размер столбца для ячейки равным 4 ячейкам из 4 ячеек в размере экрана телефона.
-
mdl-cell — 6-col-tablet — Устанавливает размер столбца для ячейки равным 6 ячейкам из 8 ячеек в размере экрана планшета.
-
mdl-cell — 8-col-tablet — Устанавливает размер столбца для ячейки равным 8 из 8 ячеек в размере экрана планшета.
mdl-layout — идентифицирует div как компонент MDL.
mdl-js-layout — добавляет базовое поведение MDL во внешний div.
mdl-layout — fixed-header — делает заголовок всегда видимым, даже на маленьких экранах.
mdl-layout__header-row — определяет контейнер как строку заголовка MDL.
mdl-layout__drawer — идентифицирует div как блок макета MDL.
mdl-layout-title — Определяет текст заголовка макета.
mdl-navigation — определяет div как группу навигации MDL.
mdl-navigation__link — Определяет привязку как навигационную ссылку MDL.
mdl-layout__content — определяет div как содержимое макета MDL.
mdl-grid — определяет div как компонент сетки MDL.
mdl-cell — определяет div как ячейку MDL.
mdl-cell — 1-col — Устанавливает размер столбца для ячейки равным 1 ячейке из 12 ячеек в размере экрана рабочего стола.
mdl-cell — 2-col — Устанавливает размер столбца для ячейки равным 2 из 12 ячеек в размере экрана рабочего стола.
mdl-cell — 4-col — Устанавливает размер столбца для ячейки равным 4 из 12 ячеек в размере экрана рабочего стола.
mdl-cell — 6-colo — устанавливает размер столбца для ячейки равным 6 ячейкам из 12 ячеек в размере экрана рабочего стола.
mdl-cell — 4-col-phone — Устанавливает размер столбца для ячейки равным 4 ячейкам из 4 ячеек в размере экрана телефона.
mdl-cell — 6-col-tablet — Устанавливает размер столбца для ячейки равным 6 ячейкам из 8 ячеек в размере экрана планшета.
mdl-cell — 8-col-tablet — Устанавливает размер столбца для ячейки равным 8 из 8 ячеек в размере экрана планшета.
mdl_grid.htm
<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">
<style>
.graybox {
background-color:#ddd;
}
</style>
</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 Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>
Результат
Проверьте результат.
Материал Дизайн Lite — Вкладки
Компонент вкладки 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
<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>
Результат
Проверьте результат.
Material Design Lite — нижние колонтитулы
Компонент нижнего колонтитула MDL поставляется в двух основных формах: мега-нижний колонтитул и мини-нижний колонтитул . Мега-нижний колонтитул содержит более сложный контент, чем мини-нижний колонтитул. Мега-нижний колонтитул может представлять несколько разделов контента, которые разделены горизонтальными правилами, тогда как мини-нижний колонтитул представляет один раздел контента. Нижние колонтитулы обычно содержат как информационный, так и интерактивный контент, например ссылки.
MDL предоставляет различные CSS-классы для применения различных предопределенных визуальных и поведенческих улучшений к мега-футеру и мини-футеру. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-мега-сноска Определяет контейнер как мега-нижний компонент MDL. Требуется для элемента нижнего колонтитула. |
| 2 |
лея-мега-footer__top сечение Определяет контейнер как верхнюю часть нижнего колонтитула. Требуется для верхнего раздела «внешний» элемент div. |
| 3 |
лея-мега-footer__left сечение Определяет контейнер как левый раздел. Обязательный для левого раздела «внутренний» элемент div. |
| 4 |
лея-мега-footer__social-BTN Определяет декоративный квадрат в мега-нижнем колонтитуле. Требуется для элемента кнопки (если используется). |
| 5 |
лея-мега-footer__right сечение Определяет контейнер как правильный раздел. Требуется для правого раздела «внутренний» элемент div. |
| 6 |
лея-мега-footer__middle сечение Определяет контейнер как среднюю часть нижнего колонтитула. Требуется для средней секции «внешнего» элемента div. |
| 7 |
лея-мега-footer__drop вниз сечение Определяет контейнер как раскрывающуюся (вертикальную) область содержимого. Требуется для выпадающих «внутренних» элементов div. |
| 8 |
лея-мега-footer__heading Определяет заголовок как заголовок мега-нижнего колонтитула. Требуется для элемента h1 внутри раскрывающегося списка. |
| 9 |
лея-мега-footer__link-лист Определяет неупорядоченный список как раскрывающийся (вертикальный) список. Требуется для элемента ul внутри выпадающего раздела. |
| 10 |
лея-мега-footer__bottom сечение Определяет контейнер как нижнюю часть нижнего колонтитула. Требуется для нижнего раздела «внешний» элемент div. |
| 11 |
лея-логотип Определяет контейнер как стилизованный заголовок раздела. Требуется для «внутреннего» элемента div в нижней части мега-нижнего колонтитула или в левой части мини-нижнего колонтитула. |
| 12 |
лея мини-сноска Определяет контейнер как компонент мини-футера MDL. Требуется для элемента нижнего колонтитула. |
| 13 |
лея мини-footer__left сечение Определяет контейнер как левый раздел. Обязательный для левого раздела «внутренний» элемент div. |
| 14 |
лея-мини-footer__link-лист Определяет неупорядоченный список как встроенный (горизонтальный) список. Требуется для родственного элемента ul к элементу div «mdl-logo». |
| 15 |
лея мини-footer__right сечение Определяет контейнер как правильный раздел. Требуется для правого раздела «внутренний» элемент div. |
| 16 |
лея мини-footer__social-BTN Определяет декоративный квадрат в мини-футере. Требуется для элемента кнопки (если используется). |
лея-мега-сноска
Определяет контейнер как мега-нижний компонент 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
<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>
Результат
Проверьте результат.
Мини нижний колонтитул
Следующий пример поможет вам понять использование класса mdl-mini-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-mini-footer — определяет контейнер как компонент мини-футера MDL.
-
mdl-mini-footer__left-section — определяет контейнер как левый раздел.
-
mdl-logo — определяет контейнер как стилизованный заголовок раздела.
-
mdl-mini-footer__link-list — Определяет неупорядоченный список как встроенный (горизонтальный) список.
-
mdl-mini-footer__right-section — определяет контейнер как правый раздел.
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-mini-footer — определяет контейнер как компонент мини-футера MDL.
mdl-mini-footer__left-section — определяет контейнер как левый раздел.
mdl-logo — определяет контейнер как стилизованный заголовок раздела.
mdl-mini-footer__link-list — Определяет неупорядоченный список как встроенный (горизонтальный) список.
mdl-mini-footer__right-section — определяет контейнер как правый раздел.
mdl_minifooter.htm
<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>
Результат
Проверьте результат.
Материал Дизайн Lite — Значки
Компонент значка MDL — это экранное уведомление, которое может быть числом или значком. Обычно используется, чтобы подчеркнуть количество предметов.
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений к значкам. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-значок Определяет элемент как компонент значка MDL. Требуется для элемента span или link. |
| 2 |
лея-значок — нет-фон Применяет эффект открытого круга к значку и является необязательным. |
| 3 |
MDL-пропуск — перекрытие Делает значок наложенным на свой контейнер и является необязательным. |
| 4 |
данные жетоны = «значение» Присваивает строковое значение значку, используемому в качестве атрибута; требуется на промежуток или ссылку. |
лея-значок
Определяет элемент как компонент значка MDL. Требуется для элемента span или link.
лея-значок — нет-фон
Применяет эффект открытого круга к значку и является необязательным.
MDL-пропуск — перекрытие
Делает значок наложенным на свой контейнер и является необязательным.
данные жетоны = «значение»
Присваивает строковое значение значку, используемому в качестве атрибута; требуется на промежуток или ссылку.
пример
Следующий пример поможет вам понять использование класса mdl-badge для добавления уведомлений в span и link элементов.
Классы MDL, приведенные ниже, будут использованы в этом примере.
-
mdl-badge — определяет элемент как компонент значка MDL.
-
data-badge — назначает строковое значение значку. Иконки могут быть назначены ему с помощью символов HTML.
mdl-badge — определяет элемент как компонент значка MDL.
data-badge — назначает строковое значение значку. Иконки могут быть назначены ему с помощью символов HTML.
mdl_badges.htm
<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>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>
Результат
Проверьте результат.
Материал Дизайн Lite — Кнопки
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
<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>
Результат
Проверьте результат.
Материал Дизайн Лайт — Карты
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
<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>
Результат
Проверьте результат.
Material Design Lite — Прогресс Бары
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов индикаторов выполнения. В следующей таблице указаны доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-JS-прогресс Устанавливает базовое поведение MDL для индикатора прогресса и является обязательным классом. |
| 2 |
лея-progress__indeterminate Устанавливает анимацию в индикатор прогресса и является необязательным классом. |
лея-JS-прогресс
Устанавливает базовое поведение MDL для индикатора прогресса и является обязательным классом.
лея-progress__indeterminate
Устанавливает анимацию в индикатор прогресса и является необязательным классом.
пример
Следующий пример поможет вам понять использование классов mdl-js-progress для показа различных типов индикаторов выполнения.
mdl_progressbars.htm
<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>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>
Результат
Проверьте результат.
Материал Дизайн Лайт — Спиннеры
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов счетчиков. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-вертушка Определяет контейнер как компонент счетчика MDL и является обязательным классом. |
| 2 |
лея-JS-вертушка Устанавливает базовое поведение MDL для счетчика и является обязательным классом. |
| 3 |
это-активные Показывает и анимирует счетчик и является необязательным. |
| 4 |
лея-вертушка — одноцветный Использует один цвет вместо изменения цвета и является необязательным. |
лея-вертушка
Определяет контейнер как компонент счетчика MDL и является обязательным классом.
лея-JS-вертушка
Устанавливает базовое поведение MDL для счетчика и является обязательным классом.
это-активные
Показывает и анимирует счетчик и является необязательным.
лея-вертушка — одноцветный
Использует один цвет вместо изменения цвета и является необязательным.
пример
Следующий пример поможет вам понять использование классов mdl-spinner и различных типов спиннеров.
mdl_spinners.htm
<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>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — Меню
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
<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>
Результат
Проверьте результат.
Материал Дизайн Лайт — Слайдеры
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов меню. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-слайдер Идентифицирует элемент ввода как компонент MDL и является обязательным. |
| 2 |
лея-JS-слайдер Устанавливает базовое поведение MDL для элемента ввода и является обязательным. |
лея-слайдер
Идентифицирует элемент ввода как компонент MDL и является обязательным.
лея-JS-слайдер
Устанавливает базовое поведение MDL для элемента ввода и является обязательным.
пример
Следующий пример поможет вам понять использование классов mdl-slider для показа различных типов ползунков.
mdl_sliders.htm
<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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — Флажки
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-флажок Определяет метку как компонент MDL и требуется для элемента метки. |
| 2 |
лея-JS-флажок Устанавливает базовое поведение MDL для метки и требуется для элемента метки. |
| 3 |
лея-checkbox__input Устанавливает базовое поведение MDL для флажка и требуется для элемента ввода (флажок). |
| 4 |
лея-checkbox__label Устанавливает базовое поведение MDL для заголовка и требуется для элемента span (заголовка). |
| 5 |
MDL-JS-эффект пульсации Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (флажок). |
лея-флажок
Определяет метку как компонент MDL и требуется для элемента метки.
лея-JS-флажок
Устанавливает базовое поведение MDL для метки и требуется для элемента метки.
лея-checkbox__input
Устанавливает базовое поведение MDL для флажка и требуется для элемента ввода (флажок).
лея-checkbox__label
Устанавливает базовое поведение MDL для заголовка и требуется для элемента span (заголовка).
MDL-JS-эффект пульсации
Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (флажок).
пример
Следующий пример поможет вам понять использование классов mdl-slider для отображения различных типов флажков.
mdl_checkboxes.htm
<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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — радио кнопки
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов переключателей. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-радио Определяет метку как компонент MDL и требуется для элемента метки. |
| 2 |
лея-JS-радио Устанавливает базовое поведение MDL для метки и требуется для элемента метки. |
| 3 |
лея-radio__button Устанавливает базовое поведение MDL для радио и требуется для элемента ввода (радио-кнопка). |
| 4 |
лея-radio__label Устанавливает базовое поведение MDL для заголовка и требуется для элемента span (заголовка). |
| 5 |
MDL-JS-эффект пульсации Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель). |
лея-радио
Определяет метку как компонент MDL и требуется для элемента метки.
лея-JS-радио
Устанавливает базовое поведение MDL для метки и требуется для элемента метки.
лея-radio__button
Устанавливает базовое поведение MDL для радио и требуется для элемента ввода (радио-кнопка).
лея-radio__label
Устанавливает базовое поведение MDL для заголовка и требуется для элемента span (заголовка).
MDL-JS-эффект пульсации
Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель).
пример
Следующий пример поможет вам понять использование классов mdl-slider для отображения различных типов переключателей.
mdl_radio.htm
<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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.
Материал Дизайн Lite — Иконки
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков в виде значков. В следующих таблицах перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-значок-переключатель Определяет метку как компонент MDL и требуется для элемента метки. |
| 2 |
лея-JS-значок-переключатель Устанавливает базовое поведение MDL для метки и требуется для элемента метки. |
| 3 |
лея-икона-toggle__input Устанавливает базовое поведение MDL на значок-переключатель и требуется для элемента ввода (значок-переключатель). |
| 4 |
лея-икона-toggle__label Устанавливает основное поведение MDL для заголовка и требуется для элемента i (значок). |
| 5 |
MDL-JS-эффект пульсации Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (иконка-переключатель). |
лея-значок-переключатель
Определяет метку как компонент MDL и требуется для элемента метки.
лея-JS-значок-переключатель
Устанавливает базовое поведение MDL для метки и требуется для элемента метки.
лея-икона-toggle__input
Устанавливает базовое поведение MDL на значок-переключатель и требуется для элемента ввода (значок-переключатель).
лея-икона-toggle__label
Устанавливает основное поведение MDL для заголовка и требуется для элемента i (значок).
MDL-JS-эффект пульсации
Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (иконка-переключатель).
пример
В следующем примере демонстрируется использование классов mdl-icon-toggle для отображения различных типов флажков в виде значков.
mdl_icons.htm
<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>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — Переключатели
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков в качестве переключателей. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-переключатель Определяет метку как компонент MDL и требуется для элемента метки. |
| 2 |
MDL-JS-переключатель Устанавливает базовое поведение MDL для метки и требуется для элемента метки. |
| 3 |
лея-switch__input Устанавливает базовое поведение MDL для переключения и требуется для входного элемента (switch). |
| 4 |
лея-switch__label Устанавливает базовое поведение MDL для заголовка и требуется для элемента ввода (заголовок). |
| 5 |
MDL-JS-эффект пульсации Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель). |
лея-переключатель
Определяет метку как компонент MDL и требуется для элемента метки.
MDL-JS-переключатель
Устанавливает базовое поведение MDL для метки и требуется для элемента метки.
лея-switch__input
Устанавливает базовое поведение MDL для переключения и требуется для входного элемента (switch).
лея-switch__label
Устанавливает базовое поведение MDL для заголовка и требуется для элемента ввода (заголовок).
MDL-JS-эффект пульсации
Устанавливает эффект щелчка пульсации и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель).
пример
Следующий пример поможет вам понять использование классов mdl-switch и различных типов флажков в качестве switch.
mdl_switches.htm
<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>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — DataTable
MDL предоставляет ряд CSS-классов для применения различных предопределенных визуальных и поведенческих улучшений и отображения таблицы в виде таблицы данных. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
MDL-данных таблицы Определяет таблицу как компонент MDL и требуется для элемента таблицы. |
| 2 |
MDL-JS-данных таблицы Устанавливает базовое поведение MDL для таблицы и требуется для элемента таблицы. |
| 3 |
лея-данных таблицы — по выбору Устанавливает все / индивидуально выбираемое поведение (флажки) и является необязательным; идет на элемент таблицы. |
| 4 |
лея-данных table__cell — нечисловая Устанавливает форматирование текста в ячейку данных и является необязательным; идет как на заголовок таблицы, так и на ячейки данных таблицы. |
| 5 |
(никто) По умолчанию задает числовое форматирование для заголовка или ячейки данных. |
MDL-данных таблицы
Определяет таблицу как компонент MDL и требуется для элемента таблицы.
MDL-JS-данных таблицы
Устанавливает базовое поведение MDL для таблицы и требуется для элемента таблицы.
лея-данных таблицы — по выбору
Устанавливает все / индивидуально выбираемое поведение (флажки) и является необязательным; идет на элемент таблицы.
лея-данных table__cell — нечисловая
Устанавливает форматирование текста в ячейку данных и является необязательным; идет как на заголовок таблицы, так и на ячейки данных таблицы.
(никто)
По умолчанию задает числовое форматирование для заголовка или ячейки данных.
пример
Следующий пример поможет вам понять использование классов mdl-data-table для отображения таблицы данных.
mdl_data_tables.htm
<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 class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — Текстовые поля
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов ввода текста. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-TextField Определяет контейнер как компонент MDL и требуется для «внешнего» элемента div. |
| 2 |
лея-JS-TextField Устанавливает базовое поведение MDL для ввода и требуется для «внешнего» элемента div. |
| 3 |
лея-textfield__input Определяет элемент как ввод текстового поля и требуется для ввода или элемента textarea. |
| 4 |
лея-textfield__label Определяет элемент как метку текстового поля и требуется для элемента метки для элементов ввода или элементов текста. |
| 5 |
лея-TextField — с плавающей этикетки Применяет эффект плавающей метки и является необязательным; идет на «внешний» элемент div. |
| 6 |
лея-textfield__error Определяет span как сообщение об ошибке MDL и является необязательным; идет на элемент span для элемента ввода MDL с шаблоном. |
| 7 |
MDL-TextField — расширяемый Определяет div как контейнер расширяемого текстового поля MDL; используется для расширяемых полей ввода и требуется для «внешнего» элемента div. |
| 8 |
лея кнопки Определяет ярлык как кнопку с изображением MDL; используется для расширяемых полей ввода и требуется для элемента label «external» div. |
| 9 |
лея-JS-кнопка Устанавливает базовое поведение для иконки контейнера; используется для расширяемых полей ввода и требуется для элемента label «external» div. |
| 10 |
лея кнопки — значок Определяет метку как контейнер значков MDL; используется для расширяемых полей ввода и требуется для элемента label «external» div. |
| 11 |
лея-input__expandable-держатель Определяет контейнер как компонент MDL; используется для расширяемых полей ввода и требуется для «внутреннего» элемента div. |
| 12 |
является недействительным Идентифицирует текстовое поле как недопустимое при начальной загрузке и является необязательным для элемента mdl-textfield. |
лея-TextField
Определяет контейнер как компонент MDL и требуется для «внешнего» элемента div.
лея-JS-TextField
Устанавливает базовое поведение MDL для ввода и требуется для «внешнего» элемента div.
лея-textfield__input
Определяет элемент как ввод текстового поля и требуется для ввода или элемента textarea.
лея-textfield__label
Определяет элемент как метку текстового поля и требуется для элемента метки для элементов ввода или элементов текста.
лея-TextField — с плавающей этикетки
Применяет эффект плавающей метки и является необязательным; идет на «внешний» элемент div.
лея-textfield__error
Определяет span как сообщение об ошибке MDL и является необязательным; идет на элемент span для элемента ввода MDL с шаблоном.
MDL-TextField — расширяемый
Определяет div как контейнер расширяемого текстового поля MDL; используется для расширяемых полей ввода и требуется для «внешнего» элемента div.
лея кнопки
Определяет ярлык как кнопку с изображением MDL; используется для расширяемых полей ввода и требуется для элемента label «external» div.
лея-JS-кнопка
Устанавливает базовое поведение для иконки контейнера; используется для расширяемых полей ввода и требуется для элемента label «external» div.
лея кнопки — значок
Определяет метку как контейнер значков MDL; используется для расширяемых полей ввода и требуется для элемента label «external» div.
лея-input__expandable-держатель
Определяет контейнер как компонент MDL; используется для расширяемых полей ввода и требуется для «внутреннего» элемента div.
является недействительным
Идентифицирует текстовое поле как недопустимое при начальной загрузке и является необязательным для элемента mdl-textfield.
пример
Следующий пример поможет вам понять использование классов mdl-textfield для показа различных типов текстовых полей.
mdl_textfields.htm
<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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.
Material Design Lite — Подсказки
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов всплывающих подсказок. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя класса и описание |
|---|---|
| 1 |
лея-подсказка Определяет контейнер как всплывающую подсказку MDL и требуется для элемента контейнера всплывающей подсказки. |
| 2 |
лея-подсказка — большая Устанавливает эффект большого шрифта и является необязательным; идет на элемент контейнера всплывающей подсказки. |
лея-подсказка
Определяет контейнер как всплывающую подсказку MDL и требуется для элемента контейнера всплывающей подсказки.
лея-подсказка — большая
Устанавливает эффект большого шрифта и является необязательным; идет на элемент контейнера всплывающей подсказки.
пример
Следующий пример поможет вам понять использование классов mdl-tooltip для показа различных типов подсказок.
mdl_tooltips.htm
<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">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>
Результат
Проверьте результат.