Angular Material - Angular Material Widgets - Angular Material Tutorial
What is Widgets in Angular Material?
- Angular Material provide a rich library of UI widgets allows users to have advanced interaction capability with the application.
learn angular material tutorials - widgets Example
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular
Widgets and its descriptions:
- The following are few important Widgets along with its descriptions:
Sr.No | Widget & Description |
---|---|
1 | Buttons
The md-button, an Angular Directive, is a button directive having optional ink ripples (and are by default enabled). If href or ng-href attribute is provided, then this directive acts as an anchor element. |
2 | CheckBoxes
The md-checkbox, an Angular Directive, is used as a checkbox control. |
3 | Content
The md-content, an Angular Directive, is a container element and is used for scrollable content. The layout-padding attribute can be added to have padded content. |
4 | DatePicker
The md-datepicker, an Angular Directive, is an input control to select a date. It also supports ngMessages for input validation. |
5 | Dialogs
The md-dialog, an Angular Directive, is a container element and is used to display a dialog box. Its element md-dialog-content contains the content of the dialog and the md-dialog-actions is responsible for dialog actions. The mdDialog, an Angular Service, opens a dialog over the application to keep the users informed and help them make decisions. |
6 | Divider
The md-divider, an Angular Directive, is a rule element and is used to display a thin lightweight rule to group and divide contents within lists and page layouts. |
7 | List
The md-list, an Angular directive, is a container component that contains md-list-item elements as a children. The md-list-item directive is a container component for row items of md-list container. CSS classes md-2-line and md-3-line can be added to md-list-item to increase the height of row with 22px and 40px respectively. |
8 | Menu
The md-menu, an Angular directive, is a component to display addition options within the context of action performed. The md-menu has two child elements. The first element is the trigger element and is used to open the menu. The second element is the md-menu-content to represent the content of the menu when the menu is opened. The md-menu-content usually carries the menu items as md-menu-item. |
9 | Menu Bar
The md-menu-bar, is a container component to hold multiple menus. The menu bar helps to create an operating system provided menu effect. |
10 | Progress Bars
The md-progress-circular and md-progress-linear are Angular progress directives, and are used to show the loading content message in application. |
11 | Radio Buttons
The md-radio-group and md-radio-button Angular directives are used to show radio buttons in the applcation. The md-radio-group is the grouping container for md-radio-button elements. |
12 | Selects
The md-select, an Angular directives is used to show Select box, bounded by ng-model. |
13 | Fab Toolbars
The md-fab-toolbar, an Angular directive, is used to show a toolbar of elements or buttons for quick access to common actions. |
14 | Sliders
The md-slider, an Angular directives is used to show a range component. It has two modes −
|
15 | Tabs
The md-tabs and md-tab Angular directives are used to show tabs in the applcation. md-tabs is the grouping container for md-tab elements. |
16 | Toolbars
The md-toolbar, an Angular directives is used to show a toolbar which is normally an area above content to show the title and the relevant buttons. |
17 | Tooltips
The Angular Material provides various special methods to show unobtrusive tooltips to the users. Angular Material provides ways to assign directions for them and md-tooltip directive is used to show tooltips. A tooltip activates whenever the user focuses, hovers over, or touches the parent component. |
18 | Chips
The md-chips, an Angular Directive, is used as a special component called the Chip and can be used to represent small set of information for example, a contact, tags etc. Custom template can be used to render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips. |
19 | Contact Chips
The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. A user can select one of these and add it to the list of availble chips. |