Angular Material 小部件


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

下表列出了一些重要的 Widgets 附上他们的描述:

序号 小部件和描述
1 Buttons

The md按钮 ,一个 Angular 指令,是一个按钮指令,具有可选的墨水波纹(默认情况下启用)。如果 href or ng-href 如果提供了属性,则该指令充当锚元素。

2 复选框

The md-复选框 ,一个 Angular 指令,用作复选框控件。

3 Content

The md-内容 ,一个 Angular 指令,是一个容器元素,用于可滚动的内容。这 布局填充 可以添加属性来填充内容。

4 DatePicker

The md-datepicker ,一个角度指令,是一个选择日期的输入控件。它还支持 ngMessages 进行输入验证。

5 Dialogs

The md 对话框 ,一个Angular Directive,是一个容器元素,用于显示一个对话框。它的元素 md-对话框内容 包含对话框的内容和 md-对话框操作 负责对话动作。

The mdDialog ,一个 Angular 服务,在应用程序上打开一个对话框,让用户了解并帮助他们做出决定。

6 Divider

The md 分频器 ,一个角度指令,是一个规则元素,用于显示一个细的轻量级规则,以对列表和页面布局中的内容进行分组和划分。

7 List

The md-list ,一个 Angular 指令,是一个容器组件,包含 md 列表项 作为孩子的元素。 md-list-item 指令是 md-list 容器的行项目的容器组件。 CSS 类 md-2 线 and md-3 线 可以添加到 md-list-item 以分别增加 22px 和 40px 的行高。

8 Menu

The md-menu ,一个 Angular 指令,是一个组件,用于在执行的操作的上下文中显示附加选项。这 md-menu 有两个子元素。第一个元素是 触发元件 并用于打开菜单。第二个元素是 md 菜单内容 表示菜单打开时的菜单内容。 md-menu-content 通常将菜单项作为 md-menu-item 携带。

9 Menu Bar

The md 菜单栏 , 是一个容纳多个菜单的容器组件。菜单栏有助于创建操作系统提供的菜单效果。

10 进度条

The md-进度-循环 and md-progress-linear 是 Angular 进度指令,用于在应用程序中显示加载内容消息。

11 单选按钮

The md-广播组 and md 单选按钮 Angular 指令用于在应用程序中显示单选按钮。 md-radio-group 是 md-radio-button 元素的分组容器。

12 Selects

The md-选择 , Angular 指令用于显示选择框,以 ng-model 为界。

13 Fab 工具栏

The md-fab-工具栏 ,一个 Angular 指令,用于显示元素或按钮的工具栏,以便快速访问常用操作。

14 Sliders

The md-滑块 , Angular 指令用于显示范围组件。它有两种模式:

  • normal : 用户可以在大范围的数值之间滑动。默认。

  • discrete : 用户可以在所选值之间滑动。要启用离散模式,请使用 md-discrete 和 step 属性。

15 Tabs

The md-tabs and md-tab Angular 指令用于在应用程序中显示选项卡。 md-tabs 是 md-tab 元素的分组容器。

16 Toolbars

The md 工具栏 , Angular 指令用于显示工具栏,该工具栏通常是内容上方的区域,用于显示标题和相关按钮。

17 Tooltips

Angular Material 提供了各种特殊的方法来向用户显示不显眼的工具提示。 Angular Material 提供了为它们分配方向的方法,并且 md-tooltip 指令用于显示工具提示。每当用户聚焦、悬停或触摸父组件时,都会激活工具提示。

18 Chips

The md-chips Angular 指令,用作称为芯片的特殊组件,可用于表示一小组信息,例如联系人、标签等。自定义模板可用于渲染芯片的内容。这可以通过将具有自定义内容的 md-chip-template 元素指定为 md-chips 的子元素来实现。

19 接触芯片

The md-接触芯片 ,一个 Angular 指令,是一个建立在 md 芯片上的输入控件,并使用 md-自动完成 元素。联系人芯片组件接受一个查询表达式,该表达式返回一个可能的联系人列表。用户可以选择其中之一并将其添加到可用芯片列表中。