От автора: Angular Material 2 стала легче и проще в использовании, и я немного поигралась с этой библиотекой. Как увидите ниже, я поэкспериментировала с цветами. 🙂
Теперь можно использовать на компонентах класс md-elevation (спасибо, Elad, что показал мне это!)! Класса еще нет в документации, но есть ссылка на репозиторий Angular Material 2 на github.
В документацию скоро добавят описание принципа работы класса md-elevation, он довольно прост. Ниже я объясню вам, как его использовать.
Для изображений, карточек, кнопок и т.д. просто добавьте class=»md-elevation-zX», где «Х» может быть любым числом от 1 до 24. Пример всех значений.
Слишком много значений для меня, MaterializeCSS обычно сужает выбор до 6 вариантов. Поэтому я представила ниже свои эквиваленты. Шаг класса md-elevation должен быть z2, z3, z4, z5, z9, z15.
Ниже показано мое радужное сравнение! В первом случае используется класс md-elevation, во втором все еще z-depth.
Если интересно, вот код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <button style="background-color: #FF4081; color: white" class="z-depth-5" md-button> Making </button> <button style="background-color: #FFC107; color: white" class="z-depth-4" md-button> Pretty </button> <button style="background-color: #4CAF50; color: white" class="z-depth-3" md-button> Buttons </button> <button style="background-color: #2196F3; color: white" class="z-depth-2" md-button> Is Awesome </button> <button style="background-color: #536DFE; color: white" class="z-depth-1-half" md-button> !!!!! </button> <button style="background-color: #9C27B0; color: white" class="z-depth-1" md-button> <i class="fa fa-hand-peace-o"></i> </button> </div> <div> <button style="background-color: #FF4081; color: white" class="md-elevation-z15" md-button> Making </button> <button style="background-color: #FFC107; color: white" class="md-elevation-z9" md-button> Pretty </button> <button style="background-color: #4CAF50; color: white" class="md-elevation-z5" md-button> Buttons </button> <button style="background-color: #2196F3; color: white" class="md-elevation-z4" md-button> Is Awesome </button> <button style="background-color: #536DFE; color: white" class="md-elevation-z3" md-button> !!!!! </button> <button style="background-color: #9C27B0; color: white" class="md-elevation-z2" md-button> <i class="fa fa-hand-peace-o"></i> </button> </div> |
Вот так я делал, когда не знал про класс md-elevation. Я понял, что класс очень полезен, когда хотел создать или поменять глубину тени в компонентах точно так же, как я это делаю в MaterializeCSS с помощью класса «z-depth-4» и т.д. (документация по ссылке).
Стили я взял с репозитория MaterializeCSS на github отсюда.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.z-depth-1 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .z-depth-1-half { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); } .z-depth-2 { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .z-depth-3 { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3); } .z-depth-4 { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3); } .z-depth-5 { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); } |
Можете скопировать эти стили в свой файл style.css в проект angular-cli и использовать их глобально с помощью следующей записи:
|
1 |
<button md-button class="z-depth-5">I'm a button</button> |
Получаются вот такие симпатичные кнопки.
И код кнопок выше.
|
1 2 3 4 5 6 |
<button class="z-depth-1" color="primary" md-button> z-depth-1 </button> <button class="z-depth-1-half" color="primary" md-button> z-depth-1-half </button> <button class="z-depth-2" color="primary" md-button> z-depth-2 </button> <button class="z-depth-3" color="primary" md-button> z-depth-3 </button> <button class="z-depth-4" color="primary" md-button> z-depth-4 </button> <button class="z-depth-5" color="primary" md-button> z-depth-5 </button> |
Надеюсь, моя статья поможет вам! 🙂 С уважением, Трейси
Автор: Tracy Lee
Источник: //medium.com/
Редакция: Команда webformyself.
