Материальный дизайн — поведение компонентов

Элементы интерфейса ведут себя по разному в каждой контрольной точке.

Изменения в ширине компонентов

Ширина компонента может быть:

  • фиксированной;
  • адаптивной.

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

  • выталкивания;
  • наложения.

Фиксированная ширина

Компонент с фиксированной шириной никогда не меняет свою ширину.

Кнопка зафиксирована в правом крае.

Адаптивная ширина

Компонент с адаптивной шириной изменяет свою ширину от текущего размера экрана.

Кнопка масштабируется в пределах сетки.

Осторожно используйте компоненты с адаптивной шириной, поскольку они могут излишне подчеркнуть на себе акцент.

Никогда не используйте адаптивную ширину компонентов, если они слишком узкие что бы отобразить свои отступы.

Выталкивание

При выталкивании компоненты остаются той же ширины, но изменяют своё положение по оси X и могут быть частично перекрыты краем экрана.

Основной контент выталкивается блоком навигации за край экрана.

Наложение

При наложении компоненты не меняют своё положение по оси X и остаются тех же размеров.

Основной контент перекрывается блоком навигации.

Адаптивное поведение компонентов

Расскрытие

Блоки интерфейса, скрытые на маленьких экранах, могут быть показаны при увеличении доступного пространства.

Навигация остаётся видимой на большом экране.

При увеличении экрана раскрывается больше элементов управления для редактора.

Контент, который был скрыт на маленьком экране, становится видимым по умолчанию на большом.

Перекомпоновка

В зависимости от контрольной точки, компонент может изменить свой формат из одного в другой.

Боковая навигация трансформируется во вкладки на большом экране.

Список трансформируется в изображения с подписями на большом экране.

Пункты меню превращаются в иконки.

Разделение

Интерфейс может отображать все элементы одновременно, когда доступно больше экранного пространства.

Навигация и контент делят пространство на большом экране.

Вкладки на большом экране полностью показывают своё содержимое.

Изменение потока

Интерфейс может изменить компоновку контейнеров, чтобы переразметить доступное пространство.

Переразметка интерфейса при изменении контрольной точки.

Горизонтальные вкладки на мобильном интерфейсе трансформируются в список на большом экране.

Перекомпоновка компонентов при изменении ориентации экрана.

Расширение

Интерфейс может расширяться используя большее пространство.

При изменении ширины экрана, область контента тоже расширяется, чтобы заполнить больше пространства.

Диалоговое окно расширяется пропорционально контенту.

Изменение позиции

Компонент может изменить свою позицию, чтобы занять более подходящее место в интерфейсе.

Список перемещается в дополнительное меню.

Кнопка действия перемещается в более видимое место, относительно других элементов.