|
|
@@ -2,14 +2,27 @@ const app = require('../app')
|
|
|
|
|
|
app.component('appTestPage', {
|
|
|
template: html`
|
|
|
- <h2>Material Buttons</h2>
|
|
|
- <p>
|
|
|
- <md-button class="md-primary">Hello World</md-button>
|
|
|
- <md-button class="md-accent">Hello World</md-button>
|
|
|
- <md-button class="md-warn">Hello World</md-button>
|
|
|
- <md-button class="">Hello World</md-button>
|
|
|
- </p>
|
|
|
+ <div flex layout="column">
|
|
|
+ <h2>Material Buttons</h2>
|
|
|
+ <p>
|
|
|
+ <md-button class="md-primary">Hello World</md-button>
|
|
|
+ <md-button class="md-accent">Hello World</md-button>
|
|
|
+ <md-button class="md-warn">Hello World</md-button>
|
|
|
+ <md-button class="">Hello World</md-button>
|
|
|
+ </p>
|
|
|
+ <hr />
|
|
|
+ <h2>md-colors</h2>
|
|
|
+ <div ng-repeat="palette in ::ctrl.palettes">
|
|
|
+ <h3>{{::palette}}</h3>
|
|
|
+ <div ng-repeat="hue in ::ctrl.hues">
|
|
|
+ <pre md-colors="{ color: palette + '-' + hue }">md-colors="{ color: '{{palette + '-' + hue}}' }</pre>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
`,
|
|
|
+ controllerAs: 'ctrl',
|
|
|
controller: function() {
|
|
|
+ this.palettes = ['primary', 'accent', 'warn', 'background']
|
|
|
+ this.hues = [100, 200, 300, 400, 500, 600, 700, 800, 900]
|
|
|
}
|
|
|
})
|