角材-ホワイトフレーム

Angular Materialには、コンテナを影付きの紙のようなカードとして表示するためのいくつかの特別なクラスがあります。

次の表に、さまざまなクラスとその説明を示します。

以下に、さまざまなクラスとその説明のリストを示します。

Sr.No	Class Name & Description
1	md-whiteframe-1dp これは、1pxの境界線付きの影を持つHTMLコンテンツのコンテナをスタイルします。 1の深さを追加します。
2	md-whiteframe-2dp これにより、2pxの境界線付きの影を持つHTMLコンテンツのコンテナがスタイルされます。 2のzdepthを追加します。
3	md-whiteframe-3dp これは、3pxの境界線付きの影を持つHTMLコンテンツのコンテナのスタイルを設定します。 3のzdepthを追加します。
4	md-whiteframe-4dp これにより、4pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 4のzdepthを追加します。
5	md-whiteframe-5dp これは、5pxの境界線付きの影を持つHTMLコンテンツのコンテナをスタイルします。 5のzdepthを追加します。
6	md-whiteframe-6dp これにより、6pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 6のzdepthを追加します。
7	md-whiteframe-7dp これにより、7pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 7の深さを追加します。
8	md-whiteframe-8dp これにより、8pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 8のzdepthを追加します。
9	md-whiteframe-9dp これにより、9pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 9の深さを追加します。
10	md-whiteframe-10dp これにより、10pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 10のZ深度を追加します。
11	md-whiteframe-11dp これにより、11pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 11のz深度を追加します。
12	md-whiteframe-12dp これは、12pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルを設定します。 12のz深度を追加します。
13	md-whiteframe-13dp これにより、13pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 13のZ深度を追加します。
14	md-whiteframe-14dp これにより、14pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 14のZ深度を追加します。
15	md-whiteframe-15dp これにより、15pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 15のz深度を追加します。
16	md-whiteframe-16dp これにより、16pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 16のz深度を追加します。
17	md-whiteframe-17dp これにより、17pxの境界線付きの影付きのHTMLコンテンツのコンテナがスタイルされます。 17のz深度を追加します。
18	md-whiteframe-18dp これにより、18pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 18のZ深度を追加します。
19	md-whiteframe-19dp これにより、19pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 19のZ深度を追加します。
20	md-whiteframe-20dp これは、20pxの境界線付きの影を持つHTMLコンテンツのコンテナをスタイルします。 20のZ深度を追加します。
21	md-whiteframe-21dp これにより、21pxの境界線付きの影を持つHTMLコンテンツのコンテナがスタイルされます。 21のZ深度を追加します。
22	md-whiteframe-22dp これにより、22pxの境界線付きシャドウを含むHTMLコンテンツのコンテナのスタイルが設定されます。 22のZ深度を追加します。
23	md-whiteframe-23dp これにより、23pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイルされます。 23のZ深度を追加します。
24	md-whiteframe-24dp これにより、24pxの境界線付きシャドウを含むHTMLコンテンツのコンテナがスタイル設定されます。 24のz深度を追加します。

例

次の例は、シャドウクラスの使用を示しています。

*_am_whiteframes_*

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

結果

結果を確認します。

Angular-material-whiteframe

角材-ホワイトフレーム

例

結果