HIRANO-Satoshi/index.html

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

## src\_docs.md

      
    Raw
  

              src\_docs.md
            
          
    Indicator issue when using tabs with waves

Waves make the container position: relative; and because of that the position of the child (a in the tab li) cannot be calculated correctly, it's always at left: 0.
To work around this, set this in a css file (like in app.css here):
[md-tabs] .waves-effect {
  position: static;
}

  
## src\app.css
[md-tabs] .waves-ripple {
  position: static;
}

## src\app.html
<template>
	<require from="./app.css"></require>
	<div class="row">
		Default:
		<ul md-tabs class="z-depth-1">
			<li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>
			<li md-waves="color: primary;"><a href="#tab_2">Tab 2</a></li>
			<li md-waves="color: primary;"><a href="#tab_3">Tab 3</a></li>
			<li md-waves="color: primary;"><a href="#tab_4">Tab 4</a></li>
			<li md-waves="color: primary;"><a target="_blank" href="http://materializecss.com/">External link</a></li>
		</ul>
	</div>
	<div id="tab_1" class="tab-content z-depth-1">
		<p>
			This is tab 1
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
		</p>
	</div>
	<div id="tab_2" class="tab-content z-depth-1">
		<p>
			This is tab 2
		</p>
		<p>
			Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
		</p>
	</div>
	<div id="tab_3" class="tab-content z-depth-1">
		<p>
			This is tab 3
		</p>
		<p>
			Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
		</p>
	</div>
	<div id="tab_4" class="tab-content z-depth-1">
		<p>
			This is tab 4
		</p>
		<p>
			In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
		</p>
	</div>
	<hr />
	<div class="row">
		Fixed tabs:
		<ul md-tabs="fixed: true;" class="z-depth-1">
			<li md-waves="color: primary;"><a class="active" href="#tab21">Tab 1</a></li>
			<li md-waves="color: primary;"><a href="#tab22">Tab 2</a></li>
			<li md-waves="color: primary;"><a href="#tab23">Tab 3</a></li>
			<li md-waves="color: primary;"><a href="#tab24">Tab 4</a></li>
			<li md-waves="color: primary;"><a target="_blank" href="http://materializecss.com/">External link</a></li>
		</ul>
	</div>
	<div id="tab21" class="tab-content z-depth-1">
		<p>
			This is tab 1
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
		</p>
	</div>
	<div id="tab22" class="tab-content z-depth-1">
		<p>
			This is tab 2
		</p>
		<p>
			Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
		</p>
	</div>
	<div id="tab23" class="tab-content z-depth-1">
		<p>
			This is tab 3
		</p>
		<p>
			Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
		</p>
	</div>
	<div id="tab24" class="tab-content z-depth-1">
		<p>
			This is tab 4
		</p>
		<p>
			In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
		</p>
	</div>

</template>

## src\app.ts
export class App { }

## src\configure.ts
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");
}
	<!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>
	<template>
	<require from="./app.css"></require>
	<div class="row">
	Default:
	<ul md-tabs class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab_2">Tab 2</a></li>
	<li md-waves="color: primary;"><a href="#tab_3">Tab 3</a></li>
	<li md-waves="color: primary;"><a href="#tab_4">Tab 4</a></li>
	<li md-waves="color: primary;"><a target="_blank" href="http://materializecss.com/">External link</a></li>
	</ul>
	</div>
	<div id="tab_1" class="tab-content z-depth-1">
	<p>
	This is tab 1
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
	</p>
	</div>
	<div id="tab_2" class="tab-content z-depth-1">
	<p>
	This is tab 2
	</p>
	<p>
	Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
	</p>
	</div>
	<div id="tab_3" class="tab-content z-depth-1">
	<p>
	This is tab 3
	</p>
	<p>
	Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
	</p>
	</div>
	<div id="tab_4" class="tab-content z-depth-1">
	<p>
	This is tab 4
	</p>
	<p>
	In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
	</p>
	</div>
	<hr />
	<div class="row">
	Fixed tabs:
	<ul md-tabs="fixed: true;" class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab21">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab22">Tab 2</a></li>
	<li md-waves="color: primary;"><a href="#tab23">Tab 3</a></li>
	<li md-waves="color: primary;"><a href="#tab24">Tab 4</a></li>
	<li md-waves="color: primary;"><a target="_blank" href="http://materializecss.com/">External link</a></li>
	</ul>
	</div>
	<div id="tab21" class="tab-content z-depth-1">
	<p>
	This is tab 1
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
	</p>
	</div>
	<div id="tab22" class="tab-content z-depth-1">
	<p>
	This is tab 2
	</p>
	<p>
	Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
	</p>
	</div>
	<div id="tab23" class="tab-content z-depth-1">
	<p>
	This is tab 3
	</p>
	<p>
	Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
	</p>
	</div>
	<div id="tab24" class="tab-content z-depth-1">
	<p>
	This is tab 4
	</p>
	<p>
	In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
	</p>
	</div>

	</template>
	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");
	}