小部件(Widgets)

优质
小牛编辑
132浏览
2023-12-01

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

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

Sr.No小部件和描述
1Buttons

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

2CheckBoxes

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

3Content

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

4DatePicker

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

5Dialogs

md-dialog是一个Angular Directive,是一个容器元素,用于显示一个对话框。 其元素md-dialog-content包含md-dialog-contentmd-dialog-actions负责对话框操作。

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

6Divider

md-divider是一个Angular Directive,是一个规则元素,用于显示一个瘦的轻量级规则,用于对列表和页面布局中的内容进行分组和划分。

7List

md-list是一个Angular指令,是一个容器组件,它包含md-list-item元素作为子元素。 md-list-item指令是md-list容器的行项的容器组件。 可以将md-2-linemd-3-line CSS类添加到md-list-item,以分别增加22px和40px的行高。

8Menu

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

9菜单栏

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

10进度条

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

11单选按钮

md-radio-groupmd-radio-button Angular指令用于在applcation中显示单选按钮。 md-radio-group是md-radio-button元素的分组容器。

12Selects

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

13Fab工具栏

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

14Sliders

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

  • normal - 用户可以在宽范围的值之间滑动。 默认。

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

15Tabs

md-tabsmd-tab Angular指令用于在applcation中显示选项卡。 md-tabs是md-tab元素的分组容器。

16Toolbars

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

17Tooltips

Angular Material提供了各种特殊方法来向用户显示不显眼的工具提示。 Angular Material提供了为它们指定方向的方法,md-tooltip指令用于显示工具提示。 只要用户聚焦,悬停或触摸父组件,工具提示就会激活。

18Chips

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

19联系芯片

md-contact-chips是一个Angular Directive,是一个基于md-chips构建的输入控件,使用md-autocomplete元素。 联系芯片组件接受查询表达式,该表达式返回可能的联系人列表。 用户可以选择其中之一并将其添加到可用芯片列表中。