HIRANO-Satoshi/app.html

## app.html
<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>

## app.js
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';
  }
  */
}

## index.html
<!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>

## locale-manager.js
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;
    }
*/
}

## main.js
/*******************************************************************************
 * 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());
}

## materialize_rtl.css
/*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;
}
	<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>
	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';
	}
	*/
	}
	<!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>
	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;
	}
	*/
	}
	/*******************************************************************************
	* 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());
	}
	/*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;
	}