menuMDUIDocs
color_lens
Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Вспомогательные классы

Отступы

Эта серия утилит позволяет добавлять элементам margin (внешние отступы) и padding (внутренние отступы). Значения по умолчанию кратны 8px.

Формат имени класса: .mdui-{свойство}-{направление}-{размер}

Свойство:

  • m — устанавливает margin
  • p — устанавливает padding

Направление:

  • t — устанавливает margin-top или padding-top
  • b — устанавливает margin-bottom или padding-bottom
  • l — устанавливает margin-left или padding-left
  • r — устанавливает margin-right или padding-right
  • x — устанавливает margin-left margin-right или padding-left padding-right
  • y — устанавливает margin-top margin-bottom или padding-top padding-bottom
  • a — устанавливает margin или padding для всех сторон

Размер:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Быстрое обтекание (float)

  • .mdui-float-left делает элемент обтекаемым слева
  • .mdui-float-right делает элемент обтекаемым справа
code
Пример
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Горизонтальное центрирование

Добавьте класс .mdui-center любому элементу, чтобы центрировать его по горизонтали.

code
Пример
<div class="mdui-center" style="width: 200px">mdui-center</div>

Вертикальное центрирование

Добавьте класс .mdui-valign любому элементу, чтобы центрировать его дочерние элементы по вертикали.

code
Пример
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Горизонтальное выравнивание

  • .mdui-text-left Выравнивание текста по левому краю.
  • .mdui-text-center Выравнивание текста по центру.
  • .mdui-text-right Выравнивание текста по правому краю.
code
Пример
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Преобразование регистра текста

  • .mdui-text-lowercase Преобразование текста в нижний регистр.
  • .mdui-text-uppercase Преобразование текста в верхний регистр.
  • .mdui-text-capitalize Преобразование первой буквы каждого слова в верхний регистр.
code
Пример
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Автоматическое усечение текста

.mdui-text-truncate Автоматическое усечение текста с добавлением многоточия, когда длина текста превышает ограничение.

code
Пример
<p class="mdui-text-truncate" style="max-width: 200px;">Это очень, очень, очень, очень, очень, очень, очень, очень, очень, очень, очень, очень длинный текст.</p>

Очистка обтекания (clearfix)

Добавление класса .mdui-clearfix к родительскому элементу позволяет очистить обтекание.

code
Пример
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Скрытие содержимого

  • Класс .mdui-hidden используется для скрытия элементов (аналогично display: none;). Скрытые элементы не занимают места на странице.
  • Класс .mdui-invisible делает элементы невидимыми, но они продолжают занимать место на странице (аналогично visibility: hidden;).

Адаптивные утилиты

Эти утилиты используют медиа-запросы для скрытия контента на различных устройствах. К ним относятся:

  • .mdui-hidden-*: скрывает на устройствах с указанной шириной.
  • .mdui-hidden-*-up: скрывает на устройствах с указанной шириной и выше.
  • .mdui-hidden-*-down: скрывает на устройствах с указанной шириной и ниже.
Очень маленькие экраны
<600px		Маленькие экраны
>=600px - <1024px		Средние экраны
>=1024px - <1440px		Большие экраны
>=1440px - <1920px		Очень большие экраны
>=1920px
.mdui-hidden-xsВидимВидимВидимВидим
.mdui-hidden-smВидимВидимВидимВидим
.mdui-hidden-mdВидимВидимВидимВидим
.mdui-hidden-lgВидимВидимВидимВидим
.mdui-hidden-xlВидимВидимВидимВидим
.mdui-hidden-xs-downВидимВидимВидимВидим
.mdui-hidden-sm-downВидимВидимВидим
.mdui-hidden-md-downВидимВидим
.mdui-hidden-lg-downВидим
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upВидим
.mdui-hidden-md-upВидимВидим
.mdui-hidden-lg-upВидимВидимВидим
.mdui-hidden-xl-upВидимВидимВидимВидим

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

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Медиа
arrow_forwardNext
Тени