Material Theme

The material theme is a based on Google Material design and implemented with W20 Angular Material add-on.

Running demo available here.

Installation

$ bower install w20-material-theme --save

Configuration

In #/modules/main/theme, primaryPalette and accentPalette properties MUST be defined. Each defined *Palette property MUST have at least their name properties defined. The hues property follows Material Angular color intentions syntax. A list of color palettes is present on the Material Design Specification.

"bower_components/w20-material-theme/w20-material-theme.w20.json": {
  "modules": {
    "main": {
      "sidenav": {
        "logoUrl": "/home",
        "logoImg": "/images/logo.png",
        "backgroundImg": "/images/header-background.jpg"
      },

      "theme": {
        "primaryPalette": {
          "name": "indigo",
          "hues": {
            "default": "400",
            "hue-1": "100",
            "hue-3": "A100"
          }
        },

        "accentPalette": {
          "name": "amber"
        },

        "warnPalette": {
          "name": "red",
          "hues": {
            "default": "400",
            "hue-2": "600"
          }
        },

        "backgroundPalette": {
          "name": "blue-grey"
        },

        "dark": true // Defaults to false
      }
    }
  }
}

Usage

A simple masterpage would be:

<!DOCTYPE html>
<html data-w20-app>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <title>W20 Material Theme Test</title>
  <script type="text/javascript" data-main="bower_components/w20/modules/w20" src="bower_components/requirejs/require.js"></script>
</head>
<body layout ng-cloak>
  <div id="w20-loading-cloak">
    <div class="w20-loading-indicator"></div>
  </div>
  <w20-material-sidenav></w20-material-sidenav>
  <main layout="column" flex>
    <w20-material-topbar search-placeholder="app.i18n.topbar.search.placeholder"></w20-material-topbar>
    <md-content ng-view layout="column" layout-align="start center" flex></md-content>
  </main>
  <div data-w20-error-report></div>
</body>
</html>

Directive w20-material-sidenav

Create a Material Angular sidenav based upon a temporary drawer from the Material Design Specification. Generated by the routes property present in the fragment configuration. For each route, the icon property define its icon. Icons are Material Design Icons. By default the icon is arrow_right.

"routes": {
  "/home": {
    "templateUrl": "/views/home.html",
    "hidden": false,
    "icon": "home"
  }
}

Event w20.material.sidenav.open

You can open the sidenav by emitting the following event:

`$scope.$emit('w20.material.sidenav.open'[, state])`

Parameters:

  • state: Boolean. Open the sidenav if true. Optional. If state is omitted, the event toggle the state of the sidenav.

If you consider opening and closing the sidenav by swiping, bind the event emitters on <body> like below.

Example:

<body md-swipe-left="$emit('w20.material.sidenav.open', false)" md-swipe-right="$emit('w20.material.sidenav.open', true)">

Directive w20-material-topbar

Create a Material Angular toolbar based upon a toolbar from the Material Design Specification.

The elements in the topbar are purposely fixed in order to net being able to bloat the entire topbar with buttons. It is only composed of: - Menu button to open the sidenav, hidden when the sidenav become fixed at larger resolutions - View title, with its value from cultureService.displayName() - Search button to display a search input sending a w20.material.topbar.search.query event upon use

Attribute search-maxlength

Define a maximum length of input. When the input is too long, a red underline appears.

Attribute search-placeholder

Values are i18n key or simple string. If the attribute matches a i18n key, its value is retrieved through the localize w20 filter; if the value cannot be found, the literal string is displayed.

Event w20.material.topbar.search.query

This event is emitted when the value of the search input changes.