Okay
  Print

Material angularjs directives

Material Design for angular JS comes with a lot of very usefull directives. For a more detailed information check out the project page in https://material.angularjs.org/#/

Here I will give a little detail about the ones used in the template and how they are combined with the template files.

md-autocomplete

<md-autocomplete></md-autocomplete>

This is a special input component with a drop-down of all possible matches to a custom query. This component allows you to provide real-time suggestions as the user types in the input area.

Usage : 

<md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display">
  <span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

An example of this element is presente in the Forms menu and you can find the code inside views/forms/elements.html

md-button

<md-button></md-button>

is a button directive with optional ink ripples (default enabled). If you supply a href or ng-href attribute, it will become an <a> element. Otherwise, it will become a <button> element.

Usage : 

<md-button>
  Button
</md-button>
<md-button href="http://google.com" class="md-button-colored">
  I'm a link
</md-button>
<md-button ng-disabled="true" class="md-colored">
  I'm a disabled button
</md-button>

Several example of buttons are present in the Ui elements -> buttons menu and you can find the code inside views/ui_elements/buttons.html

md-card

<md-card></md-card>

The md-card directive is a container element used within md-content containers. Cards have constant width and variable heights; where the maximum height is limited to what can fit within a single view on a platform, but it can temporarily expand as needed

Usage : 

<md-card>
 <img src="dist/images/bg_weather1.png" class="md-card-image">
 <h2>Paracosm</h2>
 <p>
   The titles of Washed Out's breakthrough song and the first single from Paracosm share the * two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
 </p>
</md-card>

Several example of cards are present in the Ui elements -> cards menu and you can find the code inside views/ui_elements/cards.html

md-checkbox

<md-checkbox></md-checkbox>

The checkbox directive is used like the normal angular checkbox. As per the material design spec the checkbox is in the accent color by default. The primary color palette may be used with the md-primary class.

Usage : 

<md-checkbox ng-model="isChecked" aria-label="Finished?">
  Finished ?
</md-checkbox>
<md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-checkbox>
<md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-checkbox>

Several example of checkboxes are present in the Forms elements-> Forms elements menu and you can find the code inside views/forms/elements.html

md-content

<md-content></md-content>

The directive is a container element useful for scrollable content

Restrictions : Add the md-padding class to make the content padded.

Usage : 

<md-content class="md-padding">
    Lorem ipsum dolor sit amet, ne quod novum mei.
</md-content>

Several example of md-content are present all across the site from the main page to each page on Ui elements and Forms. They serve as a wrapper for content.

md-icon

<md-icon></md-icon>

The md-icon directive is an markup element useful for showing an icon based on a font-face or a SVG. Both external SVGs (via URLs) or cached SVG from icon sets can be easily loaded and used.

Usage : 

<md-icon md-font-icon="android" alt="android "></md-icon>
<md-icon md-svg-icon="action:android" alt="android "></md-icon>
<md-icon md-svg-src="/android.svg" alt="android "></md-icon>
<md-icon md-svg-src="{{ getAndroid() }}" alt="android "></md-icon>

You can find examples of md-icon being used as well as docmentation from icon names in the menu item Ui elements -> Icons

md-input

<md-input></md-input>

Use the input or the textarea as a child of an md-input-container.

Usage : 

<md-input-container>
  <label>Color</label>
  <input type="text" ng-model="color" required md-maxlength="10">
</md-input-container>

You can find examples of md-input being used and also being used with error (using ngMessages module) in the menu item Form elements -> Form elements and you can find the code inside views/forms/elements.html

md-progress-circular

<md-progress-circular></md-progress-circular>

The circular progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.

Usage : 

<md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
<md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
<md-progress-circular md-mode="determinate" value="..." md-diameter="100"></md-progress-circular>
<md-progress-circular md-mode="indeterminate"></md-progress-circular>

You can find examples of md-progress-circular being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/progress.html

md-progress-linear

<md-progress-linear></md-progress-linear>

The linear progress directive is used to make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.

Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle.

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.

Usage : 

<md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
<md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
<md-progress-linear md-mode="indeterminate"></md-progress-linear>
<md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
<md-progress-linear md-mode="query"></md-progress-linear>

You can find examples of md-progress-linear being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/progress.html

md-radio-button

<md-radio-button></md-radio-button>

The md-radio-button directive is the child directive required to be used within elements. While similar to the input type="radio" ng-model="" value="" directive, the md-radio-button directive provides ink effects, ARIA support, and supports use within named radio groups.

<md-radio-button value="1" aria-label="Label 1">
  Label 1
</md-radio-button>
<md-radio-button ng-model="color" ng-value="specialValue" aria-label="Green">
  Green
</md-radio-button>

You can find examples of md-radio-button being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

md-select

<md-select></md-select>

Displays a select box, bound to an ng-model.

<md-select ng-model="someModel" placeholder="Select a state">
  <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
</md-select>

You can find examples of md-select being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

md-sidenav

<md-sidenav></md-sidenav>

A Sidenav component that can be opened and closed programatically. By default, upon opening it will slide out on top of the main content area.

Usage : 

<div layout="row" ng-controller="MyController">
  <md-sidenav md-component-id="left" class="md-sidenav-left">
    Left Nav!
  </md-sidenav>
  <md-content>
    Center Content
    <md-button ng-click="openLeftMenu()">
      Open Left Menu
    </md-button>
  </md-content>
  <md-sidenav md-component-id="right" md-is-locked-open="$mdMedia('min-width: 333px')" class="md-sidenav-right">
    Right Nav!
  </md-sidenav>
</div>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('MyController', function($scope, $mdSidenav) {
  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };
});

You can find examples of md-sidenav being used in the menu item Ui Elements -> Material Ui and you can find the code inside common/navigation.html

md-slider

<md-slider></md-slider>

The component allows the user to choose from a range of values. As per the material design spec the slider is in the accent color by default.

The primary color palette may be used with the md-primary class. It has two modes: 'normal' mode, where the user slides between a wide range of values, and 'discrete' mode, where the user slides between only a few select values.

To enable discrete mode, add the md-discrete attribute to a slider, and use the step attribute to change the distance between values the user is allowed to pick.

Usage : 

<md-slider ng-model="myValue" min="5" max="500">
</md-slider>

You can find examples of md-slider being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

md-switch

<md-switch></md-switch>

The switch is a style of checkbox usefull to simulate the mobile switch elements.

Usage : 

<md-switch ng-model="isActive" aria-label="Finished?">
  Finished ?
</md-switch>
<md-switch md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-switch>
<md-switch ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-switch>

You can find examples of md-switch being used in the menu item  Form elements -> Form elements and you can find the code inside views/forms/elements.html

md-tab

<md-tab></md-tab>

Use the md-tab a nested directive used within md-tabs to specify a tab with a label and optional view content. If the label attribute is not specified, then an optional md-tab-label tag can be used to specify more complex tab header markup.

If neither the label nor the md-tab-label are specified, then the nested markup of the md-tab is used as the tab header markup. If a tab label has been identified, then any non-md-tab-label markup will be considered tab content and will be transcluded to the internal div class="md-tabs-content" container.

This container is used by the TabsController to show/hide the active tab's content view. This synchronization is automatically managed by the internal TabsController whenever the tab selection changes.

Selection changes can be initiated via data binding changes, programmatic invocation, or user gestures.

Usage : 

<md-tab label disabled md-on-select md-on-deselect>
  <h3>My Tab content</h3>
</md-tab>
<md-tab>
  <md-tab-label>
    <h3>My Tab content</h3>
  </md-tab-label>
  <p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
  </p>
</md-tab>

You can find examples of md-tab being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/tabs.html

md-toolbar

<md-toolbar></md-toolbar>

md-toolbar is used to place a toolbar in your app. Toolbars are usually used above a content area to display the title of the current page, and show relevant action buttons for that page. You can change the height of the toolbar by adding either the md-medium-tall or md-tall class to the toolbar.

Usage : 

<div layout="column" layout-fill>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <span>My App's Title</span>
      <!-- fill up the space between left and right area -->
      <span flex></span>
      <md-button>
        Right Bar Button
      </md-button>
    </div>
  </md-toolbar>
  <md-content>
    Hello!
  </md-content>
</div>

You can find examples of md-toolbar being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/ in every of the templates in this folder.

md-tooltip

<md-tooltip></md-tooltip>

Tooltips are used to describe elements that are interactive and primarily graphical (not textual). Place a as a child of the element it describes. A tooltip will activate when the user focuses, hovers over, or touches the parent.

Usage : 

<md-icon icon="/img/icons/ic_play_arrow_24px.svg">
  <md-tooltip>
    Play Music
  </md-tooltip>
</md-icon>

You can find examples of md-tooltip being used in the menu item Ui Elements -> Material Uiand you can find the code inside views/ui_elements/tooltip.html