-
-
Save HIRANO-Satoshi/3526eacc3ed1e5a7f6b4388099ee177e to your computer and use it in GitHub Desktop.
Aurelia-Materialize bridge RTL demo
This file contains hidden or 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> | |
| <p>Hello, world!</p> | |
| <div> | |
| <md-checkbox md-checked.bind="true">check box example</md-checkbox> | |
| </div> | |
| <button md-button click.delegate="toggleDirection()">Toggle Direction</button> | |
| </template> |
This file contains hidden or 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
| import { LocaleManager } from './locale-manager'; | |
| export class App { | |
| localeManager = new LocaleManager(); | |
| toggleDirection() { | |
| if (this.localeManager.direction === 'rtl') | |
| this.localeManager.direction = 'ltr'; | |
| else | |
| this.localeManager.direction = 'rtl'; | |
| } | |
| /* | |
| english() { | |
| this.localeManager.locale = 'en'; | |
| } | |
| arabic() { | |
| this.localeManager.locale = 'ar'; | |
| } | |
| */ | |
| } |
This file contains hidden or 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> | |
| <title>Aurelia</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.27.0/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| System.import('materialize/dist/css/materialize.css!'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| import { bindable, autoinject, computedFrom, inject, observable, Aurelia } from 'aurelia-framework'; | |
| //import { I18N, BaseI18N } from 'aurelia-i18n'; | |
| // @inject('I18N') | |
| export class LocaleManager { | |
| //public i18n; // Aurelia Internationalization plugin | |
| @observable direction; // rtl or ltr | |
| directionChanged() { | |
| if (this.direction === 'rtl') { | |
| require('./materialize_rtl.css'); | |
| } else { | |
| require('materialize-css/bin/materialize.css'); | |
| } | |
| document.getElementsByTagName('body')[0].setAttribute('dir', this.direction); | |
| } | |
| /* | |
| @observable locale; // current locale | |
| localeChanged() { | |
| this.i18n.setLocale(this.locale); | |
| this.direction = this.i18n.i18next.dir(this.locale); | |
| } | |
| constructor(i18n) { | |
| this.i18n = i18n; | |
| } | |
| */ | |
| } |
This file contains hidden or 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
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
This file contains hidden or 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
| /*body { | |
| direction: rtl; | |
| }*/ | |
| .input-field label { | |
| right: 0.75rem; | |
| } | |
| .input-field .prefix ~ input, | |
| .input-field .prefix ~ textarea { | |
| margin-right: 3rem; | |
| } | |
| .input-field .prefix ~ label { | |
| margin-right: 3rem; | |
| } | |
| .collapsible-header i { | |
| float: right; | |
| } | |
| form p { | |
| text-align: right; | |
| } | |
| [type="checkbox"] { | |
| /* checkbox aspect */ | |
| } | |
| [type="checkbox"] + label { | |
| padding-right: 35px; | |
| } | |
| [type="checkbox"] + label:before { | |
| right: 0; | |
| } | |
| [type="checkbox"]:checked { | |
| /* checkbox aspect */ | |
| } | |
| [type="checkbox"]:checked + label:before { | |
| right: 10px; | |
| } | |
| [type="checkbox"].filled-in + label:before { | |
| right: 10px; | |
| } | |
| [type="checkbox"].filled-in + label:after { | |
| right: 0; | |
| } | |
| [type="radio"] { | |
| /* radio aspect */ | |
| /* radio aspect */ | |
| } | |
| [type="radio"] + label { | |
| padding-right: 35px; | |
| } | |
| [type="radio"] + label:before { | |
| right: 0; | |
| } | |
| [type="radio"] + label:after { | |
| right: 0; | |
| } | |
| .row .col { | |
| float: right; | |
| } | |
| .file-field .file-path-wrapper { | |
| padding-right: 10px; | |
| } | |
| .file-field .btn { | |
| float: right; | |
| } | |
| span.badge { | |
| left: 15px; | |
| right: inherit; | |
| } | |
| .dropdown-content li { | |
| text-align: right; | |
| } | |
| .secondary-content { | |
| float: left; | |
| } | |
| .breadcrumb:before { | |
| content: '\E5CB'; | |
| } | |
| .collection .collection-item.avatar { | |
| padding-left: 0; | |
| padding-right: 72px; | |
| } | |
| .collection .collection-item.avatar .circle { | |
| right: 15px; | |
| left: auto; | |
| } | |
| .collection .collection-item.avatar .secondary-content { | |
| left: 16px; | |
| right: auto; | |
| } | |
| .collection.avatar { | |
| padding-right: 72px; | |
| padding-left: auto; | |
| } | |
| .collection.avatar .secondary-content { | |
| left: 16px; | |
| } | |
| .select-wrapper span.caret { | |
| right: auto; | |
| left: 0; | |
| } | |
| .chip img { | |
| float: right; | |
| margin: 0 -8px 0 12px; | |
| } | |
| .chip i.material-icons { | |
| float: left; | |
| padding-right: 8px; | |
| padding-left: 0; | |
| } | |
| blockquote { | |
| margin: 20px 0; | |
| padding-right: 1.5rem; | |
| border-right: 5px solid #ee6e73; | |
| } | |
| .input-field input[type=search] { | |
| padding-right: 4rem; | |
| width: calc(100% - 8rem); | |
| } | |
| .table-of-contents a.active { | |
| padding-right: 18px; | |
| border-right: 2px solid #ea4a4f; | |
| border-left: none; | |
| } | |
| .table-of-contents a { | |
| padding-right: 20px; | |
| } | |
| .table-of-contents a:hover { | |
| padding-right: 19px; | |
| border-left: none; | |
| border-right: 1px solid #ea4a4f; | |
| } | |
| td, th { | |
| text-align: right; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment