Material Design Lite - Краткое руководство
Что такое Material Design Lite?
Material Design Lite (MDL - это библиотека компонентов пользовательского интерфейса, созданная с помощью CSS, JavaScript и HTML. Компоненты пользовательского интерфейса MDL помогают создавать привлекательные, согласованные и функциональные веб-страницы и веб-приложения, соблюдая современные принципы веб-дизайна, такие как переносимость браузера, независимость от устройства. , и изящная деградация.
Ниже приведены основные особенности Material Design Lite.
Встроенное адаптивное проектирование.
Стандартный CSS с минимальным размером.
Включает новые версии общих элементов управления пользовательского интерфейса, таких как кнопки, флажки и текстовые поля, которые адаптированы в соответствии с концепциями Material Design.
Включает расширенные и специализированные функции, такие как карточки, макеты столбцов, ползунки, счетчики, вкладки, типографику и т. Д.
Может использоваться с любой библиотекой или средой разработки или без них.
Кроссбраузерность и может использоваться для создания повторно используемых веб-компонентов.
Адаптивный дизайн
В Material Design Lite встроен адаптивный дизайн, поэтому веб-сайт, созданный с помощью Material Design Lite, будет изменять свой дизайн в соответствии с размером устройства.
Классы Material Design Lite созданы таким образом, что веб-сайт может соответствовать любому размеру экрана.
Веб-сайты, созданные с помощью Material Design Lite, полностью совместимы с ПК, планшетами и мобильными устройствами.
Стандартный CSS
Material Design Lite использует только стандартный CSS, и его очень легко изучить.
Нет зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.
ExtensibleMaterial Design Lite по дизайну очень простой и плоский.
Он разработан с учетом того факта, что намного проще добавить новые правила CSS, чем перезаписать существующие правила CSS.
Он поддерживает тени и жирные цвета.
Цвета и оттенки остаются одинаковыми для разных платформ и устройств.
И самое главное, MDL можно использовать абсолютно бесплатно.
Есть два способа использовать Material Design Lite:
Local Installation - Вы можете загрузить материалы. {Primary} - {accent} .min.css и material.min.js файлы на свой локальный компьютер и включить их в свой HTML-код.
CDN Based Version - Вы можете включить файлы material. {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.
пример
Теперь вы можете включить файлы 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> - представляет раздел заголовка.
<footer> - представляет раздел нижнего колонтитула.
<article> - представляет статьи.
<section> - Предоставляет общий контейнер для различных типов разделов.
MDL предоставляет различные классы CSS для применения к контейнерам различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-layout Определяет контейнер как компонент MDL. Требуется для внешнего элемента контейнера. |
| 2 | mdl-js-layout Добавляет базовое поведение MDL в макет. Требуется для внешнего элемента контейнера. |
| 3 | mdl-layout__header Определяет контейнер как компонент MDL. Обязательно в элементе заголовка. |
| 4 | mdl-layout-icon Используется для добавления значка приложения. Переопределяется значком меню, если видны оба. Необязательный элемент значка. |
| 5 | mdl-layout__header-row Определяет контейнер как строку заголовка MDL. Требуется для контейнера содержимого заголовка. |
| 6 | mdl-layout__title Обозначает текст заголовка макета. Обязательно в контейнере заголовка макета. |
| 7 | mdl-layout-spacer Используется для выравнивания элементов внутри заголовка или ящика. Он увеличивается, чтобы заполнить оставшееся пространство. Обычно используется для выравнивания элементов по правому краю. Необязательно для div после заголовка макета. |
| 8 | mdl-navigation Определяет контейнер как группу навигации MDL. Обязательно для элемента навигации. |
| 9 | mdl-navigation__link Определяет привязку как ссылку навигации MDL. Требуется для элементов привязки заголовка и / или ящика. |
| 10 | mdl-layout__drawer Определяет контейнер как выдвижной ящик макета MDL. Обязательно на элементе контейнера ящика. |
| 11 | mdl-layout__content Определяет контейнер как содержимое макета MDL. Обязательно для основного элемента. |
| 12 | mdl-layout__header--scroll Заставляет заголовок прокручиваться вместе с содержимым. Необязательный для элемента заголовка. |
| 13 | mdl-layout--fixed-drawer Делает ящик всегда видимым и открывается на больших экранах. Необязательный для внешнего элемента контейнера, а не для элемента контейнера ящика. |
| 14 | mdl-layout--fixed-header Делает заголовок всегда видимым, даже на маленьких экранах. Необязательный для внешнего элемента контейнера. |
| 15 | mdl-layout--large-screen-only Скрывает элемент на экранах меньшего размера. Необязательный для любого потомка mdl-layout. |
| 16 | mdl-layout--small-screen-only Скрывает элемент на больших экранах. Необязательный для любого потомка mdl-layout. |
| 17 | mdl-layout__header--waterfall Позволяет создать эффект водопада с несколькими строками заголовка. Необязательный для элемента заголовка. |
| 18 | mdl-layout__header--transparent Делает заголовок прозрачным и рисует поверх фона макета. Необязательный для элемента заголовка. |
| 19 | mdl-layout__header--seamed Использует заголовок без тени. Необязательный для элемента заголовка. |
| 20 | mdl-layout__tab-bar Определяет контейнер как панель вкладок MDL. Обязательно для элемента контейнера внутри заголовка (макет с вкладками). |
| 21 год | mdl-layout__tab Определяет привязку как ссылку на вкладку MDL. Требуется для элементов привязки панели вкладок. |
| 22 | is-active Определяет вкладку как активную вкладку по умолчанию. Необязательно для элемента привязки панели вкладок и связанного элемента раздела вкладки. |
| 23 | mdl-layout__tab-panel Определяет контейнер как вкладку панели содержимого. Обязательно для элементов раздела вкладки. |
| 24 | mdl-layout--fixed-tabs Использует фиксированные вкладки вместо прокручиваемых вкладок по умолчанию. Необязательный для внешнего элемента контейнера, а не для контейнера внутри заголовка. |
В следующих примерах показано использование класса mdl-layout для стилизации различных контейнеров.
Фиксированный ящик
Чтобы создать шаблон с фиксированным ящиком, но без заголовка, используются следующие классы MDL.
mdl-layout - Определяет div как компонент MDL.
mdl-js-layout - Добавляет базовое поведение MDL к внешнему div.
mdl-layout--fixed-drawer - Делает ящик всегда видимым и открывается на больших экранах.
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_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-drawer - Делает ящик всегда видимым и открывается на больших экранах.
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_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_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_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_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-layout Определяет контейнер как компонент MDL. Требуется для внешнего элемента контейнера. |
| 2 | mdl-grid Определяет контейнер как компонент сетки MDL. Обязательно для «внешнего» элемента div. |
| 3 | mdl-cell Определяет контейнер как ячейку MDL. Требуется для «внутренних» элементов div. |
| 4 | mdl-grid--no-spacing Обновляет ячейки сетки, чтобы между ними не было поля. Необязательно для контейнера сетки. |
| 5 | mdl-cell--N-col Это помогает установить размер столбца для ячейки равным N, N равно 1–12 включительно, по умолчанию - 4; необязательный для «внутренних» элементов div. |
| 6 | mdl-cell--N-col-desktop Это помогает установить размер столбца для ячейки равным N только в режиме рабочего стола, N равно 1–12 включительно; необязательный для «внутренних» элементов div. |
| 7 | mdl-cell--N-col-tablet Это помогает установить размер столбца для ячейки равным N только в режиме планшета, N равно 1–8 включительно; необязательный для «внутренних» элементов div. |
| 8 | mdl-cell--N-col-phone Это помогает установить размер столбца для ячейки равным N только в режиме телефона, N равно 1–4 включительно; необязательный для «внутренних» элементов div. |
| 9 | mdl-cell--hide-desktop Скрывает ячейку в режиме рабочего стола. Необязательный для «внутренних» элементов div. |
| 10 | mdl-cell--hide-tablet Скрывает ячейку в режиме планшета. Необязательный для «внутренних» элементов div. |
| 11 | mdl-cell--hide-phone Скрывает ячейку в режиме телефона. Необязательный для «внутренних» элементов div. |
| 12 | mdl-cell--stretch Растягивает ячейку по вертикали, чтобы заполнить родительскую, по умолчанию; необязательный для «внутренних» элементов div. |
| 13 | mdl-cell--top Выравнивает ячейку по верхнему краю родительского элемента. Необязательный для «внутренних» элементов div. |
| 14 | mdl-cell--middle Выравнивает ячейку по середине родительского элемента. Необязательный для «внутренних» элементов div. |
| 15 | mdl-cell--bottom Выравнивает ячейку по нижнему краю родительского элемента. Необязательный для «внутренних» элементов 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-col - Устанавливает размер столбца для ячейки равным 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>Результат
Проверьте результат.
Компонент вкладки Material Design Lite (MDL) - это компонент пользовательского интерфейса, который помогает отображать несколько экранов в одном пространстве эксклюзивным образом.
MDL предоставляет различные классы CSS для применения к вкладкам различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-layout Определяет контейнер как компонент MDL. Требуется для внешнего элемента контейнера. |
| 2 | mdl-tabs Определяет контейнер вкладок как компонент MDL. Обязательно для «внешнего» элемента div. |
| 3 | mdl-js-tabs Устанавливает базовое поведение MDL для контейнера вкладок. Обязательно для «внешнего» элемента div. |
| 4 | mdl-js-ripple-effect Добавляет эффект пульсации щелчка для ссылок на вкладки. Необязательный; переходит к «внешнему» элементу div. |
| 5 | mdl-tabs__tab-bar Определяет контейнер как панель ссылок вкладок MDL. Обязательно для первого «внутреннего» элемента div. |
| 6 | mdl-tabs__tab Определяет привязку (ссылку) как активатор вкладки MDL. Требуется для всех ссылок в первом «внутреннем» элементе div. |
| 7 | is-active Определяет вкладку как вкладку отображения по умолчанию. Требуется для одного (и только одного) из «внутренних» элементов div (tab). |
| 8 | mdl-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_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>Результат
Проверьте результат.
Компонент нижнего колонтитула MDL бывает двух основных форм: mega-footer и mini-footer. Мега-нижний колонтитул содержит более сложное содержание, чем мини-нижний колонтитул. Мега-нижний колонтитул может представлять несколько разделов контента, разделенных горизонтальными правилами, тогда как мини-нижний колонтитул представляет собой один раздел контента. Нижние колонтитулы обычно содержат как информационное, так и интерактивное содержимое, например ссылки.
MDL предоставляет различные классы CSS для применения различных предопределенных визуальных и поведенческих улучшений к мега-нижнему и мини-нижнему колонтитулам. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-mega-footer Определяет контейнер как компонент мегафутера MDL. Обязательно для элемента нижнего колонтитула. |
| 2 | mdl-mega-footer__top-section Определяет контейнер как верхнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div верхней части. |
| 3 | mdl-mega-footer__left-section Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции. |
| 4 | mdl-mega-footer__social-btn Обозначает декоративный квадрат в мегафутере. Обязательно для элемента кнопки (если используется). |
| 5 | mdl-mega-footer__right-section Определяет контейнер как правую секцию. Требуется для "внутреннего" элемента div правого раздела. |
| 6 | mdl-mega-footer__middle-section Определяет контейнер как средний раздел нижнего колонтитула. Требуется для "внешнего" элемента div средней части. |
| 7 | mdl-mega-footer__drop-down-section Определяет контейнер как раскрывающуюся (вертикальную) область содержимого. Требуется для раскрывающихся «внутренних» элементов div. |
| 8 | mdl-mega-footer__heading Определяет заголовок как заголовок мегафутера. Обязательно для элемента h1 в раскрывающемся разделе. |
| 9 | mdl-mega-footer__link-list Определяет неупорядоченный список как раскрывающийся (вертикальный) список. Обязательно для элемента ul в раскрывающемся разделе. |
| 10 | mdl-mega-footer__bottom-section Определяет контейнер как нижнюю часть нижнего колонтитула. Требуется для "внешнего" элемента div нижней части. |
| 11 | mdl-logo Определяет контейнер как стилизованный заголовок раздела. Требуется для «внутреннего» элемента div в нижней части мегафутера или левой части мини-колонтитула. |
| 12 | mdl-mini-footer Определяет контейнер как компонент мини-нижнего колонтитула MDL. Обязательно для элемента нижнего колонтитула. |
| 13 | mdl-mini-footer__left-section Обозначает контейнер как левую секцию. Обязателен для "внутреннего" элемента div левой секции. |
| 14 | mdl-mini-footer__link-list Определяет неупорядоченный список как встроенный (горизонтальный) список. Требуется для элемента ul, родственного элементу div "mdl-logo". |
| 15 | mdl-mini-footer__right-section Определяет контейнер как правую секцию. Требуется для "внутреннего" элемента div правого раздела. |
| 16 | mdl-mini-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_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_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>Результат
Проверьте результат.
Компонент значка MDL - это экранное уведомление, которое может быть числом или значком. Обычно используется, чтобы подчеркнуть количество элементов.
MDL предоставляет ряд классов CSS для применения к значкам различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-badge Определяет элемент как компонент значка MDL. Требуется для элемента span или link. |
| 2 | mdl-badge--no-background Применяет эффект открытого круга к значку и является необязательным. |
| 3 | mdl-badge--overlap Заставляет значок перекрывать свой контейнер и является необязательным. |
| 4 | data-badge="value" Присваивает строковое значение значку, используемому в качестве атрибута; требуется для диапазона или ссылки. |
пример
Следующий пример поможет вам понять использование mdl-badge класс для добавления уведомлений для охвата и связывания элементов.
В этом примере будут использоваться классы MDL, приведенные ниже.
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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения к кнопкам различных предопределенных визуальных и поведенческих улучшений. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-button Устанавливает кнопку как обязательный компонент MDL. |
| 2 | mdl-js-button Добавляет базовое поведение MDL к кнопке, требуется. |
| 3 | (none) Устанавливает эффект плоского отображения для кнопки по умолчанию. |
| 4 | mdl-button--raised Устанавливает эффект приподнятого дисплея; это взаимоисключающе с fab, mini-fab и icon. |
| 5 | mdl-button--fab Устанавливает потрясающий (круговой) эффект отображения; это взаимоисключающе с поднятым, мини-фабричным и значком. |
| 6 | mdl-button--mini-fab Устанавливает эффект отображения mini-fab (small fab round); это взаимоисключающе с поднятым, fab и icon. |
| 7 | mdl-button--icon Устанавливает эффект отображения значков (маленькие круглые); это взаимоисключающе с поднятым, фабричным и мини-фабричным. |
| 8 | mdl-button--colored Устанавливает эффект цветного отображения, где цвета определены в material.min.css. |
| 9 | mdl-button--primary Устанавливает эффект отображения основного цвета, где цвета определены в material.min.css. |
| 10 | mdl-button--accent Устанавливает эффект отображения акцентного цвета, когда цвета определены в material.min.css. |
| 11 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка, может использоваться в сочетании с любым другим классом. |
пример
Следующий пример поможет вам понять использование 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 | mdl-card Определяет элемент div как контейнер карты MDL, необходимый для «внешнего» div. |
| 2 | mdl-card--border Помещает рамку в раздел карточки, к которому она применяется, и используется на «внутренних» div. |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Устанавливает переменную глубину тени (2, 3, 4, 6, 8 или 16) для карты и является необязательной, переходит во "внешний" div; если не указан, тень не отображается. |
| 4 | mdl-card__title Определяет div как контейнер заголовка карты и является обязательным для «внутреннего» заголовка div. |
| 5 | mdl-card__title-text Помещает соответствующие текстовые характеристики в заголовок карточки и требуется в теге заголовка (H1 - H6) внутри div заголовка. |
| 6 | mdl-card__subtitle-text Помещает текстовые характеристики в подзаголовок карточки и является необязательным. Это должен быть дочерний элемент элемента title. |
| 7 | mdl-card__media Определяет div как медиа-контейнер карты и является обязательным для "внутреннего" медиа-блока. |
| 8 | mdl-card__supporting-text Определяет div как контейнер основного текста карточки и присваивает соответствующие текстовые характеристики основному тексту и требуется для «внутреннего» основного текста div; текст идет прямо внутри div без промежуточных контейнеров. |
| 9 | 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов индикаторов выполнения. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-js-progress Устанавливает базовое поведение MDL для индикатора прогресса и является обязательным классом. |
| 2 | 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-spinner Определяет контейнер как компонент счетчика MDL и является обязательным классом. |
| 2 | mdl-js-spinner Устанавливает базовое поведение MDL для счетчика и является обязательным классом. |
| 3 | is-active Показывает и анимирует счетчик и является необязательным. |
| 4 | mdl-spinner--single-color Использует один цвет вместо изменения цветов и не является обязательным. |
пример
Следующий пример поможет вам понять использование 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов меню. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-button Определяет кнопку как компонент MDL и требуется для элемента кнопки. |
| 2 | mdl-js-button Устанавливает базовое поведение MDL для кнопки и требуется для элемента кнопки. |
| 3 | mdl-button--icon Устанавливает значок на кнопку и является обязательным для элемента кнопки. |
| 4 | material-icons Обозначает диапазон как значок материала и требуется для встроенного элемента. |
| 5 | mdl-menu Определяет контейнер неупорядоченного списка как компонент MDL и является обязательным для элемента ul. |
| 6 | mdl-js-menu Устанавливает базовое поведение MDL в меню и требуется для элемента ul. |
| 7 | mdl-menu__item Определяет кнопки как опции меню MDL и устанавливает базовое поведение MDL, требуемое для элементов элементов списка. |
| 8 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка для ссылок параметров и является необязательным; Требуется для элемента неупорядоченного списка. |
| 9 | mdl-menu--top-left Устанавливает позицию меню над кнопкой, выравнивает левый край меню с кнопкой и является необязательным; Требуется для элемента неупорядоченного списка. |
| 10 | (none) По умолчанию меню располагается под кнопкой, выравнивается по левому краю с кнопкой. |
| 11 | mdl-menu--top-right Меню располагается над кнопкой, выравнивается по правому краю с помощью кнопки, необязательно и переходит к элементу неупорядоченного списка. |
| 12 | mdl-menu--bottom-right Меню располагается под кнопкой, выравнивается по правому краю с помощью кнопки, необязательно и переходит к элементу неупорядоченного списка. |
пример
Следующий пример поможет вам понять использование 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-slider Идентифицирует входной элемент как компонент MDL и является обязательным. |
| 2 | mdl-js-slider Устанавливает базовое поведение 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-checkbox Обозначает этикетку как компонент MDL и является обязательным для элемента метки. |
| 2 | mdl-js-checkbox Устанавливает базовое поведение MDL для label и является обязательным для элемента label. |
| 3 | mdl-checkbox__input Устанавливает базовое поведение MDL для флажка и является обязательным для элемента ввода (флажок). |
| 4 | mdl-checkbox__label Устанавливает базовое поведение MDL для caption и является обязательным для элемента span (caption). |
| 5 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка и является необязательным; переходит на элемент метки, а не на элемент ввода (флажок). |
пример
Следующий пример поможет вам понять использование классов 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов переключателей. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-radio Обозначает этикетку как компонент MDL и является обязательным для элемента метки. |
| 2 | mdl-js-radio Устанавливает базовое поведение MDL для label и является обязательным для элемента label. |
| 3 | mdl-radio__button Устанавливает базовое поведение MDL для радио и требуется для элемента ввода (радио-кнопка). |
| 4 | mdl-radio__label Устанавливает базовое поведение MDL для caption и является обязательным для элемента span (caption). |
| 5 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель). |
пример
Следующий пример поможет вам понять использование классов 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков в виде значков. В следующих таблицах перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-icon-toggle Обозначает этикетку как компонент MDL и является обязательным для элемента метки. |
| 2 | mdl-js-icon-toggle Устанавливает базовое поведение MDL для label и является обязательным для элемента label. |
| 3 | mdl-icon-toggle__input Устанавливает базовое поведение MDL на icon-toggle и требуется для элемента ввода (icon-toggle). |
| 4 | mdl-icon-toggle__label Устанавливает базовое поведение MDL для заголовка и требуется для элемента i (значок). |
| 5 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка и является необязательным; переходит к элементу метки, а не к элементу ввода (значок-переключатель). |
пример
В следующем примере демонстрируется использование 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов флажков в качестве переключателей. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-switch Обозначает этикетку как компонент MDL и является обязательным для элемента метки. |
| 2 | mdl-js-switch Устанавливает базовое поведение MDL для label и является обязательным для элемента label. |
| 3 | mdl-switch__input Устанавливает базовое поведение MDL для переключения и требуется для элемента ввода (переключателя). |
| 4 | mdl-switch__label Устанавливает базовое поведение MDL для caption и является обязательным для элемента ввода (caption). |
| 5 | mdl-js-ripple-effect Устанавливает эффект пульсации щелчка и является необязательным; идет на элемент метки, а не на элемент ввода (переключатель). |
пример
Следующий пример поможет вам понять использование классов mdl-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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения таблицы как таблицы данных. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-data-table Идентифицирует таблицу как компонент MDL и является обязательным для элемента таблицы. |
| 2 | mdl-js-data-table Устанавливает базовое поведение MDL для таблицы и требуется для элемента таблицы. |
| 3 | mdl-data-table--selectable Устанавливает все / индивидуальное выбираемое поведение (флажки) и является необязательным; переходит на элемент таблицы. |
| 4 | mdl-data-table__cell--non-numeric Устанавливает форматирование текста для ячейки данных и является необязательным; распространяется как на заголовок таблицы, так и на ячейки данных таблицы. |
| 5 | (none) По умолчанию устанавливает числовое форматирование для заголовка или ячейки данных. |
пример
Следующий пример поможет вам понять использование 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов ввода текста. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-textfield Определяет контейнер как компонент MDL и является обязательным для «внешнего» элемента div. |
| 2 | mdl-js-textfield Устанавливает базовое поведение MDL для ввода и требуется для «внешнего» элемента div. |
| 3 | mdl-textfield__input Определяет элемент как ввод текстового поля и является обязательным для ввода или элемента текстового поля. |
| 4 | mdl-textfield__label Определяет элемент как метку текстового поля и требуется для элемента метки для элементов ввода или текстового поля. |
| 5 | mdl-textfield--floating-label Применяет эффект плавающей метки и является необязательным; переходит к «внешнему» элементу div. |
| 6 | mdl-textfield__error Определяет диапазон как сообщение об ошибке MDL и является необязательным; переходит к элементу span для элемента ввода MDL с шаблоном. |
| 7 | mdl-textfield--expandable Идентифицирует div как контейнер расширяемого текстового поля MDL; используется для расширяемых полей ввода и требуется для "внешнего" элемента div. |
| 8 | mdl-button Обозначает метку как кнопку со значком MDL; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div. |
| 9 | mdl-js-button Задает базовое поведение контейнера значков; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div. |
| 10 | mdl-button--icon Определяет метку как контейнер значка MDL; используется для расширяемых полей ввода и является обязательным для элемента метки «внешнего» div. |
| 11 | mdl-input__expandable-holder Определяет контейнер как компонент MDL; используется для расширяемых полей ввода и требуется для «внутреннего» элемента div. |
| 12 | is-invalid Идентифицирует текстовое поле как недопустимое при начальной загрузке и является необязательным для элемента 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>Результат
Проверьте результат.
MDL предоставляет ряд классов CSS для применения различных предопределенных визуальных и поведенческих улучшений и отображения различных типов всплывающих подсказок. В следующей таблице перечислены доступные классы и их эффекты.
| Sr.No. | Имя и описание класса |
|---|---|
| 1 | mdl-tooltip Определяет контейнер как всплывающую подсказку MDL и требуется для элемента контейнера всплывающей подсказки. |
| 2 | mdl-tooltip--large Устанавливает эффект крупного шрифта и не является обязательным; переходит к элементу контейнера всплывающей подсказки. |
пример
Следующий пример поможет вам понять использование 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>Результат
Проверьте результат.