md-datepicker是一个Angular Directive，是一个输入控件，用于选择日期并支持ngMessages进行输入验证。

属性 (Attributes)

下表列出了md-datepicker的不同属性的参数和描述。

md-content是一个Angular Directive，是一个容器元素，用于可滚动内容。 可以添加layout-padding属性以具有填充内容。

例子 (Example)

以下示例显示了md-content指令的使用以及角度内容显示的使用。

am_content.htm

md-checkbox是一个Angular Directive，用作复选框控件。

属性 (Attributes)

下表列出了md-checkbox的不同属性的参数和说明。

md-button是Angular Directive，是一个带有可选墨水波纹的按钮指令（默认情况下启用）。 如果提供了href或ng-href属性，则此指令充当锚元素。

属性 (Attributes)

下表列出了md-button不同属性的参数和说明。

以下资源包含有关Angular Material的其他信息。 请使用它们来获得更深入的知识。

Angular_material的有用链接

• Angular Material官方网站 - Angular Material官方网站

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

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

md-virtual-repeat-container是md-virtual-repeat组件的滚动容器。

属性 (Attributes)

下表列出了md-virtual-repeat-container的不同属性的参数和描述。

Angular Material提供各种排版CSS类，可用于在Angular JS应用程序中创建视觉一致性。

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

Angular Material提供了各种特殊方法来向用户显示不显眼的警报。 它还为他们提供了一个术语吐司。 $ mdToast服务用于显示祝酒词。

例子 (Example)

以下示例显示了toasts的用法。

am_toasts.htm

Angular Material组件使用意图组类，如md-primary，md-accent，md-warn和其他类，用于颜色差异，如md-hue-1，md-hue-2或md-hue-3。 以下组件支持使用上述类。

• md-button

• md-checkbox

• md-progress-circular

• md-progress-linear

• md-radio-button

• md-slider

• md-switch

• md-tabs

• md-text-float

md-switch是一个Angular指令，用于显示一个开关。

属性 (Attributes)

下表列出了md-switch不同属性的参数和说明。

滑动功能适用于移动设备。 以下指令用于处理滑动。

• md-swipe-down ，Angular指令用于指定向下滑动元素时的自定义行为。

• md-swipe-left ，Angular指令用于指定向左滑动元素时的自定义行为。

• md-swipe-right ，Angular指令用于指定向右滑动元素时的自定义行为。

• md-swipe-up ，Angular指令用于指定元素被刷新时的自定义行为。

md-subheader是一个Angular指令，用于显示节的子标题。

例子 (Example)

以下示例显示了md-subheader的使用以及subheader组件的用法。

am_subheaders.htm

md-fab-speed-dial是一个Angular指令，用于显示一系列弹出元素或按钮，以便快速访问常用操作。

属性 (Attributes)

下表列出了md-fab-speed-dial的不同属性的参数和描述。

md-sidenav ，Angular指令用于显示可以以编程方式显示或隐藏的容器组件。 默认情况下，它会滑过主内容区域的顶部。

属性 (Attributes)

下表列出了md-sidenav的不同属性的参数和描述

md-grid-list是一个Angular指令，是用于为不同屏幕大小布置内容的组件。 网格在桌面大小屏幕中有12列，在平板电脑大小屏幕中有8列，在手机大小屏幕中有4列，其中每个大小都有预定义的边距和装订线。 细胞按照它们被定义的顺序以连续的方式排列。

属性 (Attributes)

下表列出了md-grid-list的不同属性的参数和描述。

md-icon是一个Angular指令，是一个在应用程序中显示基于矢量的图标的组件。 除了使用Google Material Icons之外，它还支持图标字体和SVG图标。

属性 (Attributes)

下表列出了md-icon的不同属性的参数和说明。

md-input-container是一个Angular指令，是一个容器组件，它包含任何《input》或《textarea》元素作为子元素。 它还支持使用标准ng-messages指令进行错误处理，并使用ngEnter/ngLeave事件或ngShow/ngHide事件设置消息动画。

属性 (Attributes)

下表列出了md-input-container的不同属性的参数和描述。

布局指令

容器元素上的布局指令用于指定其子元素的布局方向。 以下是布局指令的可分配值 -

• row - 项目水平排列，max-height = 100％，max-width是容器中项目的宽度。

• column - 项目垂直排列，max-width = 100％，max-height是容器中项目的高度。

对于响应式设计（例如根据设备屏幕大小自动更改布局），下表中列出的布局API可用于设置具有视图宽度的设备的布局方向。

Angular Material提供了丰富的UI小部件库。 这允许用户与应用程序具有高级交互功能。

下表列出了几个重要的Widgets及其描述 -

md-card是一个Angular Directive，是一个容器指令，用于在angularjs应用程序中绘制卡片。 下表列出了md-card中使用的angular指令和类。

$mdBottomSheet是一个Angular服务，用于在应用程序上打开一个底部工作表，并提供一个简单的promise API。

md-autocomplete是一个Angular Directive，用作一个特殊的输入控件，带有内置下拉列表，显示与自定义查询的所有可能匹配。 一旦用户键入输入区域，该控件就充当实时建议框。 《md-autocomplete》可用于从本地或远程数据源提供搜索结果。 执行查询时md-autocomplete缓存结果。 第一次调用后，它使用缓存的结果来消除不必要的服务器请求或查找逻辑，并且可以禁用它。

属性 (Attributes)

下表列出了md-autocomplete的不同属性的参数和说明。

如何使用Angular_material？

有两种方法可以使用Angular材料 -

• Local Installation - 您可以在本地计算机上使用npm，jspm或bower下载Angular Material库，并将其包含在HTML代码中。

• CDN Based Version - 您可以直接从Content Delivery Network（CDN）将angular-material.min.css和angular-material js文件包含到HTML代码中。

Angular Material是Angular JS开发人员的UI组件库。 Angular Material的可重用UI组件有助于构建有吸引力，一致且功能强大的Web页面和Web应用程序，同时遵循现代Web设计原则，如浏览器可移植性，设备独立性和优雅降级。

以下是Angular材料的一些显着特征 -

• 内置的响应式设计。

• 标准CSS，占用空间极小。

• 包括新版本的常用用户界面控件，例如按钮，复选框和文本字段，这些控件适用于遵循Material Design概念。

• 包括增强和专业功能，如卡，工具栏，快速拨号，侧面导航，滑动等。

• 跨浏览器，可用于创建可重用的Web组件。

Angular Material是Angular JS开发人员的UI组件库。 Angular Material组件有助于构建有吸引力，一致且功能强大的Web页面和Web应用程序，同时遵循现代Web设计原则，如浏览器可移植性，设备独立性和优雅降级。 它有助于创建更快，更美观，更灵敏的网站。 它的灵感来自Google Material Design。

听众 (Audience)

本教程适用于渴望学习Angular Material基础知识以及如何使用它来创建更快，更美观和响应更快的网站的专业人士。 本教程解释了Angular Material的基本概念。

教程

Angular入门到精通系列教程（1） - Angular,Vue,React 选型