Angular Material - 白框 (WhiteFrame)

上一頁
下一頁

Angular Material 有幾個特殊的類，可以將容器顯示為帶有陰影的紙質卡片。

下表列出了不同的類及其描述。

序號 類名及描述
1

md-whiteframe-1dp

這為任何 HTML 內容的容器設定樣式，帶有 1 畫素邊框陰影。新增 z-depth 為 1。
2

md-whiteframe-2dp

這為任何 HTML 內容的容器設定樣式，帶有 2 畫素邊框陰影。新增 z-depth 為 2。
3

md-whiteframe-3dp

這為任何 HTML 內容的容器設定樣式，帶有 3 畫素邊框陰影。新增 z-depth 為 3。
4

md-whiteframe-4dp

這為任何 HTML 內容的容器設定樣式，帶有 4 畫素邊框陰影。新增 z-depth 為 4。
5

md-whiteframe-5dp

這為任何 HTML 內容的容器設定樣式，帶有 5 畫素邊框陰影。新增 z-depth 為 5。
6

md-whiteframe-6dp

這為任何 HTML 內容的容器設定樣式，帶有 6 畫素邊框陰影。新增 z-depth 為 6。
7

md-whiteframe-7dp

這為任何 HTML 內容的容器設定樣式，帶有 7 畫素邊框陰影。新增 z-depth 為 7。
8

md-whiteframe-8dp

這為任何 HTML 內容的容器設定樣式，帶有 8 畫素邊框陰影。新增 z-depth 為 8。
9

md-whiteframe-9dp

這為任何 HTML 內容的容器設定樣式，帶有 9 畫素邊框陰影。新增 z-depth 為 9。
10

md-whiteframe-10dp

這為任何 HTML 內容的容器設定樣式，帶有 10 畫素邊框陰影。新增 z-depth 為 10。
11

md-whiteframe-11dp

這為任何 HTML 內容的容器設定樣式，帶有 11 畫素邊框陰影。新增 z-depth 為 11。
12

md-whiteframe-12dp

這為任何 HTML 內容的容器設定樣式，帶有 12 畫素邊框陰影。新增 z-depth 為 12。
13

md-whiteframe-13dp

這為任何 HTML 內容的容器設定樣式，帶有 13 畫素邊框陰影。新增 z-depth 為 13。
14

md-whiteframe-14dp

這為任何 HTML 內容的容器設定樣式，帶有 14 畫素邊框陰影。新增 z-depth 為 14。
15

md-whiteframe-15dp

這為任何 HTML 內容的容器設定樣式，帶有 15 畫素邊框陰影。新增 z-depth 為 15。
16

md-whiteframe-16dp

這為任何 HTML 內容的容器設定樣式，帶有 16 畫素邊框陰影。新增 z-depth 為 16。
17

md-whiteframe-17dp

這為任何 HTML 內容的容器設定樣式，帶有 17 畫素邊框陰影。新增 z-depth 為 17。
18

md-whiteframe-18dp

這為任何 HTML 內容的容器設定樣式，帶有 18 畫素邊框陰影。新增 z-depth 為 18。
19

md-whiteframe-19dp

這為任何 HTML 內容的容器設定樣式，帶有 19 畫素邊框陰影。新增 z-depth 為 19。
20

md-whiteframe-20dp

這為任何 HTML 內容的容器設定樣式，帶有 20 畫素邊框陰影。新增 z-depth 為 20。
21

md-whiteframe-21dp

這為任何 HTML 內容的容器設定樣式，帶有 21 畫素邊框陰影。新增 z-depth 為 21。
22

md-whiteframe-22dp

這為任何 HTML 內容的容器設定樣式，帶有 22 畫素邊框陰影。新增 z-depth 為 22。
23

md-whiteframe-23dp

這為任何 HTML 內容的容器設定樣式，帶有 23 畫素邊框陰影。新增 z-depth 為 23。
24

md-whiteframe-24dp

這為任何 HTML 內容的容器設定樣式，帶有 24 畫素邊框陰影。新增 z-depth 為 24。

示例

以下示例顯示了陰影類的用法。

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>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.