Материал стиль: Что такое Material Design и как делать анимацию в стиле Google — статьи на Skillbox / Skillbox Media

 5. При необходимости добавьте класс mdl-cell—COLUMN-col-DEVICE , где COLUMN указывает размер столбца для ячейки на конкретном устройстве, а DEVICE указывает тип устройства.

  <дел>
  
Контент
  
идет
  
здесь

  

Компонент сетки готов к использованию.

Примеры

Сетка с пятью ячейками столбца размером 1.

  <дел>
  
CS 1
  
CS 1
  
CS 1
  
CS 1
  
CS 1

  

Сетка с тремя ячейками, одна со столбцом размера 6, одна со столбцом размера 4 и одна со столбцом размера 2.

  <дел>
  
CS 6
  
CS 4
  
CS 2

  

Сетка с тремя ячейками с размером столбца 6, которая будет отображаться как столбец с размером 8 на планшетном устройстве.

  <дел>
  
CS 6 (8 на планшете)
  
CS 6 (8 на планшете)
  
CS 6 (8 на планшете)

  

Сетка с четырьмя ячейками с размером столбца 2, которая будет отображаться как столбец с размером 4 на телефонном устройстве.

  <дел>
  
CS 2 (4 на телефоне)
  
CS 2 (4 на телефоне)
  
CS 2 (4 на телефоне)
  
CS 2 (4 на телефоне)

  

Опции конфигурации

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

  <дел>
  <дел>
      Старкс
      Ланнистеры
      Таргариены
  

  <дел>
    <ул>
      
Эддард
      
Кейтлин
      
Робб
      
Санса
      
Брэндон
      
Арья
      
Рикон
    
  
  <дел>
    <ул>
      
Тайвин
      
Серсея
      
Джейми
      
Тирион
    
  
  <дел>
    <ул>
      
Визерис
      
Дейенерис
    
  

  

Введение

Компонент Material Design Lite (MDL) tab — это элемент пользовательского интерфейса, который позволяет различным блокам контента совместно использовать одно и то же пространство экрана взаимоисключающим образом. Вкладки всегда представлены наборами из двух или более, и они упрощают просмотр и переключение между различными представлениями или функциональными аспектами приложения, а также просмотр категоризированных наборов данных по отдельности. Вкладки служат «заголовками» для соответствующего содержимого; активная вкладка — та, содержимое которой отображается в данный момент, — всегда визуально отличается от других, чтобы пользователь знал, к какому заголовку относится текущий контент.

— это установленная, но нестандартизированная функция пользовательских интерфейсов, которая позволяет пользователям просматривать различные, но часто связанные блоки контента (часто называемые панелями ).Вкладки экономят место на экране и обеспечивают интуитивно понятный и логичный доступ к данным, сокращая навигацию и связанную с этим путаницу пользователей. Их дизайн и использование являются важным фактором общего пользовательского опыта. Подробнее см. на странице спецификаций Material Design компонента вкладки.

Для включения в комплект MDL

 1. Закодируйте элемент

  <дел>

 2.Внутри «внешнего» div закодируйте один «внутренний» div для самих вкладок и один для содержимого каждой вкладки, все элементы одного уровня. То есть для трех вкладок содержимого вы должны закодировать четыре «внутренних» элемента div.

  <дел>
  <дел>
  ...
  
  <дел>
  ...
  
  <дел>
  ...
  
  <дел>
  ...
  

  

 3. Внутри первого «внутреннего» блока div (вкладки) закодируйте по одному тегу привязки (ссылка) для каждой вкладки.Включите атрибуты href со значениями, соответствующими значениям атрибутов id вкладок, и некоторый краткий текст ссылки. На оставшихся «внутренних» div (содержимом) кодируйте атрибуты id , значения которых соответствуют ссылкам href s.

  <дел>
  <дел>
    Вкладка 1
    Вкладка 2
    Вкладка 3
  
  <дел>
  ...
  
  <дел>
  ...
  
  <дел>
  ...
  

  

 4. В оставшихся «внутренних» разделах закодируйте содержимое, которое вы собираетесь отображать на каждой панели; используйте стандартные теги HTML для структурирования содержимого по желанию.

  <дел>
  <дел>
    Вкладка 1
    Вкладка 2
    Вкладка 3
  
  <дел>
    
Содержимое первой вкладки.
  
  <дел>
    
Содержимое второй вкладки.
  
  <дел>
    
Содержимое третьей вкладки.
  

  

 5. Добавьте один или несколько классов MDL, разделенных пробелами, во «внешний» и «внутренний» разделы, используя атрибут class ; обязательно включите класс is-active на вкладке, которую вы хотите отображать по умолчанию.

  <дел>
  <дел>
    Вкладка 1
    Вкладка 2
    Вкладка 3
  
  <дел>
    
Содержимое первой вкладки.
  
  <дел>
    
Содержимое второй вкладки.
  
  <дел>
    
Содержимое третьей вкладки.
  

  

Компоненты вкладки готовы к использованию.

Пример

Три вкладки с волновым эффектом на ссылках вкладок.

  <дел>
  <дел>
    О Битлз
    Участники
    Дискография
  
  <дел>
    
The Beatles — музыкальная группа из Ливерпуля, Англия, состоящая из четырех человек.Основанная в 1960 году, их карьера длилась немногим более десяти лет, но они широко известны.
    считается самой влиятельной группой в истории.
    
Эти песни входят в число самых популярных музыкальных композиций всех времен. Говорят, что каждый
    минуту каждого дня где-то на радиостанции играет песня Beatles. 
  
  <дел>
    
Участниками The Beatles были:
    <ул>
      
Джон Леннон (1940–1980)
      
Пол Маккартни (1942-)
      
Джордж Харрисон (1943–2001 гг.)
      
Ринго Старр (1940–)
    
  
  <дел>
    
Оригинальные пластинки The Beatles в Великобритании, в порядке их выпуска:
    <ол>
      
Пожалуйста, доставь мне удовольствие (1963)
      
С Битлз (1963 г.)
      
Вечер трудного дня (1964)
      
Битлз на продажу (1964 г.)
      
Помогите! (1965)
      
Резиновая душа (1965)
      
Револьвер (1966 г.)
      
Сержант.Группа клуба одиноких сердец Пеппера (1967)
      
The Beatles ("Белый альбом", 1968 г.)
      
Желтая подводная лодка (1969 г.)
      
Эбби-роуд (1969 г.)
      
Пусть будет (1970)
    
  

  

Опции конфигурации

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

Введение

Компонент Material Design Lite (MDL) нижнего колонтитула представляет собой всеобъемлющий контейнер, предназначенный для представления значительного объема связанного контента в визуально привлекательной и логически интуитивно понятной области. Хотя он называется «нижним колонтитулом», его можно разместить в любом подходящем месте на экране устройства до или после другого содержимого.

Компонент нижнего колонтитула MDL принимает две основные формы: меганижний колонтитул и мини-нижний колонтитул . Как следует из названия, меганижние колонтитулы содержат больше (и более сложный) контент, чем мини-футеры. Мега-нижний колонтитул представляет несколько разделов контента, разделенных горизонтальными линиями, а мини-нижний колонтитул представляет собой один раздел контента. Обе формы нижнего колонтитула имеют собственную внутреннюю структуру, включающую обязательные и необязательные элементы, и обычно содержат как информационное, так и интерактивное содержимое, например ссылки.

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

1а. Закодируйте элемент