Angular Material - Widgets


Advertisements


Angular Material provides a rich library of UI widgets. This allows users to have advanced interaction capability with the application.

The following table lists down a few important Widgets with their description −

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 −

  • normal − User can slide between wide range of values. Default.

  • discrete − User can slide between selected values. To enable discrete mode use md-discrete and step attributes.

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.



Advertisements