Angular Material - Widgets

2024 年 8 月 29 日 | 阅读 3 分钟

Angular Material 提供了一个UI小部件库。借助此库,用户可以与应用程序进行高级交互。

下表列出了一些基本的小部件及其描述

序号小部件描述
1按钮md-button 是一个包含可选墨水波纹的按钮指令。如果存在 hrefng-href 属性,则该指令充当锚点元素。
2复选框md-checkbox 用于制作任何复选框和控件。
3内容md-content 是一个容器元素。它也用于可滚动的內容。layout-padding 特性可以添加到填充 Material。
4日期选择器日期选择器是一个 Angular 指令,用作选择日期的输入控件。它还支持输入验证的消息。
5对话框md-dialog 是一个容器元素,主要用于显示对话框。md-dialog-actions 负责对话框操作。
它打开了应用程序上的讨论,以告知用户并做出决定。
6分隔符md-divider 是一个规则元素,用于显示一个纤细、轻量级的规则,用于将内容划分为组,以及在列表和页面布局中。
7列表md-list 是一个容器组件,其中包含 md-list-item 元素作为子元素。CSS 类 md-2-line 和 md-3-line 被添加到 md-list-item 以分别增加行高 22px40px
8Menu (菜单)angular 指令 md-menu 是一个组件,用于在执行任务的上下文中显示其他选项。 md-menu 有两个子元素。
  • 第一个是触发器元素,主要用于打开菜单。
  • 第二个是 md-menu-content,用于表示菜单打开时菜单的内容。 Md-menu-content 将菜单项作为 md-menu-items 携带。
9菜单栏md-menu-bar 是一个容器组件,用于容纳许多菜单。菜单栏提供操作系统提供的菜单效果。
10进度条md-progress-circular 和 md-progress-linear 是 angular 进度指令,用于显示应用程序的加载内容消息。
11单选按钮md-radio-group 和 md-radio-button angular 指令用于显示单选按钮。 md-radio-group 是 md-radio-button 元素的容器。
12选择框md-select 用于显示选择框,由 ng-model 绑定。
13Fab 工具栏md-fab-toolbar 用于显示元素的工具栏或按钮,以便快速使用常见动词。
14滑块指令 md-slider 用于显示边界组件。 有两种方法可以执行此操作
  • 一般: 用户可以在展开值省略之间滑动。
  • 离散: 用户可以在选定值之间滑动。 使用 md-discrete 启用离散模式。
15Tabs (标签页)md-tabs 是一种 angular 指令,用于在 angular 中显示选项卡。 md-tabs 是 md-tab 元素的分组容器。
16工具栏 (Toolbars)md-toolbar 用于显示工具栏,该工具栏是内容上方的区域,用于显示标题和相关按钮。
17工具提示Angular 内容提供了许多特殊方法来向用户显示不显眼的工具提示。 angular 范围为其提供了指令,md-tooltip 指令用于显示工具提示。当用户集中时,工具提示被激活并触摸父组件。
18Chipmd-chips 是一个 angular 指令,用作称为 Chip 的唯一组件。它代表一小部分信息。
例如,联系人、标签等。自定义模板用于呈现 Chip 的内容。可以通过指定包含自定义内容的 md-chip-template 元素来实现,如 md-chips。
19联系人 Chipangular 指令 md-contact-chips 是基于 md-chips 构建的输入控件,并使用 md-autocomplete 元素。联系人 Chip 组件接受一个列出联系人的查询表达式。

在下一节中,我们将详细讨论每个小部件。