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ả.