Vật liệu Angular - WhiteFrame
Angular Material có một số lớp đặc biệt để hiển thị các hộp đựng dưới dạng thẻ giống như giấy với bóng.
Bảng sau liệt kê các lớp khác nhau với mô tả của chúng.
| Sr.No | Tên & Mô tả Lớp học |
|---|---|
| 1 | md-whiteframe-1dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 1px. Thêm zdepth của 1. |
| 2 | md-whiteframe-2dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 2px. Thêm zdepth của 2. |
| 3 | md-whiteframe-3dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 3px. Thêm zdepth của 3. |
| 4 | md-whiteframe-4dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 4px. Thêm zdepth của 4. |
| 5 | md-whiteframe-5dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 5px. Thêm zdepth của 5. |
| 6 | md-whiteframe-6dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 6px. Thêm zdepth của 6. |
| 7 | md-whiteframe-7dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 7px. Thêm zdepth của 7. |
| số 8 | md-whiteframe-8dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 8px. Thêm zdepth của 8. |
| 9 | md-whiteframe-9dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 9px. Thêm zdepth của 9. |
| 10 | md-whiteframe-10dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 10px. Thêm độ sâu z của 10. |
| 11 | md-whiteframe-11dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng có viền 11px. Thêm độ sâu z của 11. |
| 12 | md-whiteframe-12dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 12px. Thêm độ sâu z của 12. |
| 13 | md-whiteframe-13dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 13px. Thêm độ sâu của z là 13. |
| 14 | md-whiteframe-14dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 14px. Thêm chiều sâu z là 14. |
| 15 | md-whiteframe-15dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 15px. Thêm độ sâu của z là 15. |
| 16 | md-whiteframe-16dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 16px. Thêm độ sâu của z là 16. |
| 17 | md-whiteframe-17dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 17px. Thêm độ sâu của z là 17. |
| 18 | md-whiteframe-18dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 18px. Thêm chiều sâu z là 18. |
| 19 | md-whiteframe-19dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 19px. Thêm độ sâu của z là 19. |
| 20 | md-whiteframe-20dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 20px. Thêm độ sâu z của 20. |
| 21 | md-whiteframe-21dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 21px. Thêm độ sâu của z là 21. |
| 22 | md-whiteframe-22dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 22px. Thêm độ sâu của z là 22. |
| 23 | md-whiteframe-23dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 23px. Thêm độ sâu của z là 23. |
| 24 | md-whiteframe-24dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 24px. Thêm chiều sâu z là 24. |
Thí dụ
Ví dụ sau cho thấy việc sử dụng các lớp bóng.
am_whiteframes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.frameContainer md-whiteframe {
background: #fff;
margin: 30px;
height: 100px;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('frameController', frameController);
function frameController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "frameController as ctrl"
layout = "row" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-1dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-2dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-3dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-10dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-15dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-20dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-22dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-23dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-24dp</span>
</md-whiteframe>
</div>
</body>
</html>Kết quả
Xác minh kết quả.