Created
June 13, 2018 12:09
-
-
Save MaximBalaganskiy/26acad1a82c465a330f97d0944540d60 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div aurelia-app="src/configure"> | |
| Loading... | |
| </div> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script> | |
| <script> | |
| System.import("aurelia-bootstrapper"); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <style> | |
| div.button-row { | |
| padding: 5px 0; | |
| } | |
| </style> | |
| <div> | |
| <div class="button-row"> | |
| <button md-button="disabled.bind: !firstButtonEnabled; flat.bind: !firstButtonRaised"> | |
| <i class="left material-icons">mode_edit</i>I'm a basic button</button> | |
| <button md-button="flat: true;">I'm a flat button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="large: true;">I'm a large button</button> | |
| <button md-button="flat: true; large: true;">I'm a large flat button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="disabled: true;">I'm a basic disabled button</button> | |
| <button md-button="disabled: true; flat: true;">I'm a flat disabled button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button class="primary">I'm a primary colored button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="flat: true;" class="primary-text">I'm a flat primary colored button</button> | |
| </div> | |
| <div class="actions"> | |
| <hr /> First button: | |
| <md-switch label-on="enabled" label-off="disabled" checked.bind="firstButtonEnabled"></md-switch> | |
| <md-switch label-on="raised" label-off="flat" checked.bind="firstButtonRaised"></md-switch> | |
| </div> | |
| </div> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| firstButtonEnabled = true; | |
| firstButtonRaised = true; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export async function configure(aurelia) { | |
| await aurelia.loader.loadModule("materialize-css"); | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin("aurelia-materialize-bridge", bridge => bridge.useAll()) | |
| .plugin("aurelia-validation") | |
| .globalResources("src/shared/logger"); | |
| await aurelia.start(); | |
| aurelia.setRoot("src/app"); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment