- Angular Material 教程
- Angular Material - 首页
- Angular Material - 概述
- 环境设置
- Angular Material - 自动完成
- Angular Material - 底部菜单
- Angular Material - 卡片
- Angular Material - 组件
- Angular Material - 布局
- Angular Material - 输入框
- Angular Material - 图标
- Angular Material - 网格
- Angular Material - 侧边导航栏
- Angular Material - 浮动操作按钮速拨盘
- Angular Material - 副标题
- Angular Material - 滑动
- Angular Material - 开关
- Angular Material - 主题
- Angular Material - 提示信息
- Angular Material - 排版
- Angular Material - 虚拟滚动
- Angular Material - 白边框
- Angular Material 有用资源
- Angular Material - 快速指南
- Angular Material - 有用资源
- Angular Material - 讨论
Angular Material - 组件
Angular Material 提供了丰富的UI组件库。这允许用户与应用程序进行高级交互。
下表列出了一些重要的组件及其描述:
| 序号 | 组件及描述 |
|---|---|
| 1 | 按钮
md-button是一个Angular指令,是一个按钮指令,具有可选的墨水涟漪效果(默认启用)。如果提供了href或ng-href属性,则此指令充当锚元素。 |
| 2 | 复选框
md-checkbox是一个Angular指令,用作复选框控件。 |
| 3 | 内容
md-content是一个Angular指令,是一个容器元素,用于可滚动的内容。可以添加layout-padding属性以获得填充内容。 |
| 4 | 日期选择器
md-datepicker是一个Angular指令,是一个用于选择日期的输入控件。它还支持ngMessages进行输入验证。 |
| 5 | 对话框
md-dialog是一个Angular指令,是一个容器元素,用于显示对话框。其元素md-dialog-content包含对话框的内容,md-dialog-actions负责对话框操作。 mdDialog是一个Angular服务,在应用程序上打开一个对话框,以使用户了解情况并帮助他们做出决策。 |
| 6 | 分隔线
md-divider是一个Angular指令,是一个规则元素,用于显示细的轻量级规则,以对列表和页面布局中的内容进行分组和划分。 |
| 7 | 列表
md-list是一个Angular指令,是一个容器组件,包含md-list-item元素作为子元素。md-list-item指令是md-list容器行项目的容器组件。CSS类md-2-line和md-3-line可以添加到md-list-item以分别将行高增加22px和40px。 |
| 8 | 菜单
md-menu是一个Angular指令,是一个组件,用于在执行的操作上下文中显示附加选项。md-menu有两个子元素。第一个元素是触发元素,用于打开菜单。第二个元素是md-menu-content,用于表示菜单打开时的内容。md-menu-content通常包含作为md-menu-item的菜单项。 |
| 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是一个Angular指令,用于显示由ng-model绑定的下拉选择框。 |
| 13 | 浮动操作按钮工具栏
md-fab-toolbar是一个Angular指令,用于显示元素或按钮的工具栏,以便快速访问常用操作。 |
| 14 | 滑块
md-slider是一个Angular指令,用于显示范围组件。它有两种模式:
|
| 15 | 标签页
md-tabs和md-tab Angular指令用于在应用程序中显示标签页。md-tabs是md-tab元素的分组容器。 |
| 16 | 工具栏
md-toolbar是一个Angular指令,用于显示工具栏,通常是内容上方的区域,用于显示标题和相关按钮。 |
| 17 | 工具提示
Angular Material 提供了各种特殊方法来向用户显示不显眼的工具提示。Angular Material 提供了为其分配方向的方法,并使用md-tooltip指令显示工具提示。当用户聚焦、悬停或触摸父组件时,工具提示会激活。 |
| 18 | 标签
md-chips是一个Angular指令,用作称为芯片的特殊组件,可用于表示少量信息,例如联系人、标签等。可以使用自定义模板来渲染芯片的内容。这可以通过指定一个md-chip-template元素来实现,该元素具有作为md-chips子元素的自定义内容。 |
| 19 | 联系人标签
md-contact-chips是一个Angular指令,是基于md-chips构建的输入控件,并使用md-autocomplete元素。联系人标签组件接受一个查询表达式,该表达式返回可能的联系人列表。用户可以选择其中一个并将其添加到可用芯片列表中。 |