-
-
Save Thanood/53d204d26d8183ff0b56a40a65843ce8 to your computer and use it in GitHub Desktop.
Aurelia-Materialize bridge RTL demo edited
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> | |
| <require from="./materialize_rtl.css"></require> | |
| <div class="row"> | |
| <div class="col m6"> | |
| <p>Hello, world!</p> | |
| </div> | |
| <div class="col m6"> | |
| <md-checkbox md-checked.bind="true">check box example</md-checkbox> | |
| </div> | |
| <button md-button click.delegate="toggleDirection()">Toggle Direction</button> | |
| </div> | |
| </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