| S.N. | Widgets | Description |
|---|
| 1 | Buttons | The md-button is a button instruction that contains optional ink waves. If href or ng-href attribute is there then the directive acts as an anchor element. |
| 2 | Checkboxes | The md-checkbox is used to make any checkboxes and controls. |
| 3 | Content | md-content is a container element. It is also used for scrollable content. The layout-padding feature can be added to the padded Material. |
| 4 | Date Picker | The date picker is an Angular directive, which is used as input control for selecting a date. It also supports messages for input validation. |
| 5 | Dialogs | The md-dialog is a container element mainly used to display dialog boxes. md-dialog-actions are responsible for dialog actions.
It opens a discussion on the application to keep users informed and decide. |
| 6 | Divider | The md-divider is a rule element which displays a thin, lightweight rule to divide the content into groups and also in lists and page layouts. |
| 7 | List | The md-list is a container component containing the md-list-item elements as children. The CSS classes md-2-line and md-3-line is added to the md-list-item to increase row height with 22px and 40px, respectively. |
| 8 | Menu | The angular directive md-menu is a component to display additional options in the context of the task performed. The md-menu has two child elements.- The first one is the trigger element that is mainly used to open the menu.
- The second one is md-menu-content that is used to represent the menu's contents when menu is open. Md-menu-content carries menu items as md-menu-items.
|
| 9 | Menu Bar | md-menu-bar is a container component that is used for holding many menus. The menu bar provides an operating system provided menu effect. |
| 10 | Progress Bars | md-progress-circular and md-progress-linear are angular progression instructions that are used to show the application's loading content message. |
| 11 | Radio Buttons | The md-radio-group and md-radio-button angular directives is used to show radio buttons. md-radio-group is the container for md-radio-button elements. |
| 12 | Selects | The md-select is used to show the Select box, bounded by the ng-model. |
| 13 | Fab Toolbars | md-fab-toolbar is used to show the toolbar of elements or buttons for quick use of common verbs. |
| 14 | Sliders | The directive md-slider is used to show the boundary component. There are two ways to do this:- General: Users can slide between expanded values omission.
- Discrete: The user can slide between the selected values. Use md-discrete to enable discrete modes.
|
| 15 | Tabs | md-tabs is a type of angular directives that is used to show tabs in angular. md-tabs is a grouping container for md-tab elements. |
| 16 | Toolbars | md-toolbar is used to show the toolbar that is the area above the content to show the title and related buttons. |
| 17 | Tooltips | Angular content provides many particular ways to show users unobtrusive tooltips. The angular range offers instructions for them, and the md-tooltip directive is used to display tooltips. A tooltip is activated and touches the parent component when the user concentrates. |
| 18 | Chips | The md-chips are an angular directive used as a unique component called a chip. It represents a small set of information.
For example, a contact, tag, etc. Custom templates are used to render the contents of a chip. It can be achieved by specifying the md-chip-template element containing the custom content as md-chips. |
| 19 | Contact Chips | The angular directive md-contact-chips are the input control that is built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression that lists the contacts. |
