Додаємо Box Shadow (z-глибину) компоненти Angular Material 2

31

Від автора: Angular Material 2 стала легше і простіше у використанні, і я трохи поигралась з цією бібліотекою. Як побачите нижче, я експериментувала з квітами. :)

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Тепер можна використовувати на компонентах клас md-elevation (спасибі, Elad, що показав мені це!)! Класу ще немає в документації, але є посилання на репозиторій Angular Material 2 на github.

В документацію скоро додадуть опис принципу роботи класу md-elevation, він досить простий. Нижче я поясню вам, як його використовувати.

Для зображень, карток, кнопок і т. д. просто додайте class=»md-elevation-zX», де «Х» може бути будь-яким числом від 1 до 24. Приклад всіх значень.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Занадто багато значень для мене, MaterializeCSS зазвичай звужує вибір до 6 варіантів. Тому я представила нижче свої еквіваленти. Крок класу md-elevation повинен бути z2, z3, z4, z5, z9, z15.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Нижче показано моє веселкове порівняння! У першому випадку використовується клас md-elevation, у другому все ще z-depth.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Якщо цікаво, ось код.

Making
Pretty
Buttons
Is Awesome
!!!!!
Making
Pretty
Buttons
Is Awesome
!!!!!

Ось так я робив, коли не знав про клас md-elevation. Я зрозумів, що клас дуже корисний, коли хотів створити або змінити глибину тіні в компонентах точно так само, як я це роблю в MaterializeCSS з допомогою класу «z-depth-4» і т. д. (документація по посиланню).

Стилі я взяв з репозиторію MaterializeCSS на github звідси.

.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: 6px 0 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 і використовувати їх глобально за допомогою наступної запису:

I’m a button

Виходять ось такі симпатичні кнопки.

Добавляем Box Shadow (z-глубину) в компоненты Angular Material 2

Код кнопок вище.

z-depth-1
z-depth-1-half
z-depth-2
z-depth-3
z-depth-4
z-depth-5

Сподіваюся, моя стаття допоможе вам! :) З повагою, Трейсі