Angular Material - WhiteFrame

Angular Material WhiteFrame - 从简单和简单的步骤学习Angular Material，从基本到高级概念，包括概述，环境设置，自动完成，底部工作表，按钮，卡片，复选框，芯片，联系芯片，内容，DatePicker，Dialogs，Divider， Fab Speed Dial，Fab工具栏，网格，图标，输入，布局，列表，菜单，菜单栏，进度条，单选按钮，选择，SideNav，滑块，Subheaders，刷卡，开关，标签，主题，Toast，工具栏，工具提示，排版，虚拟重复，WhiteFrame。

Angular Material有几个特殊类可以将容器显示为带阴影的类纸卡.

下表列出了不同类及其描述.

Sr.No	Class姓名&说明
1	md-whiteframe-1dp 这为任何带有1px边框阴影的HTML内容设置容器样式.添加zdepth为1.
2	md-whiteframe-2dp 这为任何带有2px边框阴影的HTML内容设置容器样式.添加zdepth为2.
3	md-whiteframe-3dp 这为任何带有3px边框阴影的HTML内容设置容器样式.添加zdepth为3.
4	md-whiteframe-4dp 这为任何带有4px边框阴影的HTML内容设置容器样式.添加zdepth为4.
5	md-whiteframe-5dp 这为任何带有5px边框阴影的HTML内容设置容器样式.添加zdepth为5.
6	md-whiteframe-6dp 这为任何带有6px边框阴影的HTML内容设置容器样式.添加zdepth为6.
7	md-whiteframe-7dp 这为任何带有7px边框阴影的HTML内容设置容器样式.添加zdepth为7.
8	md-whiteframe-8dp 这为具有8px边界阴影的任何HTML内容设置容器样式.添加zdepth为8.
9	md-whiteframe-9dp 这为任何带有9px边框阴影的HTML内容设置容器样式.添加zdepth为9.
10	md-whiteframe-10dp 这为任何带有10px边框阴影的HTML内容设置容器样式.添加z深度为10.
11	md-whiteframe-11dp 这为任何带有11px边框阴影的HTML内容设置容器样式.添加z深度为11.
12	md-whiteframe-12dp 这为任何带有12px边框阴影的HTML内容设置容器样式.添加z深度为12.
13	md-whiteframe-13dp 这为任何带有13px边框阴影的HTML内容设置容器样式.添加z深度为13.
14	md-whiteframe-14dp 这为任何带有14px边框阴影的HTML内容设置容器样式.添加z深度为14.
15	md-whiteframe-15dp 这为任何带有15px边框阴影的HTML内容设置容器样式.添加z深度为15.
16	md-whiteframe-16dp 这为任何带有16px边框阴影的HTML内容设置容器样式.添加z深度为16.
17	md-whiteframe-17dp 这为具有17px边界阴影的任何HTML内容设置容器样式.添加z深度为17.
18	md-whiteframe-18dp 这为任何带有18px边框阴影的HTML内容设置容器样式.添加z深度为18.
19	md-whiteframe-19dp 这为具有19px边界阴影的任何HTML内容设置容器样式.添加z深度为19.
20	md-whiteframe-20dp 这为任何带有20px边框阴影的HTML内容设置容器样式.添加z深度为20.
21	md-whiteframe-21dp 这为任何带有21px边框阴影的HTML内容设置容器样式.添加z深度为21.
22	md-whiteframe-22dp 这为任何带有22px边框阴影的HTML内容设置容器样式.添加z深度为22.
23	md-whiteframe-23dp 这为任何带有23px边框阴影的HTML内容设置容器样式.添加z深度为23.
24	md-whiteframe-24dp 这为任何带有24px边框阴影的HTML内容设置容器样式.添加z深度为24.

示例

以下示例显示了影子类的使用.

am_whiteframes.htm

                                                                              angular            .module('firstApplication', ['ngMaterial'])            .controller('frameController', frameController);                    function frameController ($scope) {                        }                                                   .md-whiteframe-1dp                                       .md-whiteframe-2dp                                       .md-whiteframe-3dp                                       .md-whiteframe-10dp                                       .md-whiteframe-15dp                                       .md-whiteframe-20dp                                       .md-whiteframe-22dp                                       .md-whiteframe-23dp                                       .md-whiteframe-24dp

结果

验证结果.