Тени
Утилиты для управления тенями в стиле Material Design. Используют свойство box-shadow.
Классы
| Класс | Уровень тени |
|---|---|
elevation-0 | Нет тени |
elevation-1 | Очень лёгкая |
elevation-2 | Лёгкая |
elevation-3 | Слабая |
elevation-4 | Заметная |
elevation-5 | Умеренная |
elevation-6 | Средняя |
elevation-7 | Средняя+ |
elevation-8 | Выраженная |
elevation-9 | Сильная |
elevation-10 | Сильная+ |
elevation-11 | Очень сильная |
elevation-12 | Высокая |
elevation-13 | Высокая+ |
elevation-14 | Очень высокая |
elevation-15 | Очень высокая+ |
elevation-16 | Глубокая |
elevation-17 | Глубокая+ |
elevation-18 | Очень глубокая |
elevation-19 | Очень глубокая+ |
elevation-20 | Максимальная |
elevation-21 | Максимальная+ |
elevation-22 | Сверхмаксимальная |
elevation-23 | Сверхмаксимальная+ |
elevation-24 | Самая высокая |
Рекомендуемые уровни
| Компонент | Уровень |
|---|---|
| Карточка по умолчанию | elevation-1 или elevation-2 |
| Карточка при наведении | elevation-4 |
| Навигационная панель | elevation-4 |
| Выпадающий список | elevation-8 |
| Боковая панель | elevation-16 |
| Диалоговое окно | elevation-24 |
Примеры
html
<div class="elevation-0 pa-4 radius-4">Без тени</div>
<div class="elevation-2 pa-4 radius-4">Лёгкая карточка</div>
<div class="elevation-4 pa-4 radius-4">Приподнятая карточка</div>
<div class="elevation-8 pa-4 radius-4">Всплывающий элемент</div>
<div class="elevation-16 pa-4 radius-4">Боковая панель</div>
<div class="elevation-24 pa-4 radius-4">Диалог</div>