material-design-lite/test/visual/index.html

80 lines
3.4 KiB
HTML

<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual tests</title>
<link href="//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel='stylesheet'>
<base href="../../">
<link rel="stylesheet" href="css/material.css">
<style>
.demo-container {
width: 100%;
float: left;
margin: 0 40px 40px 0;
border: 1px solid #888888;
position: relative;
height: 500px;
}
iframe {
width: auto;
}
.mdl-layout__content {
padding: 10px;
}
</style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--overlay-drawer-button">
<div class="mdl-layout__header">
<span class="mdl-layout-title">Components</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-input mdl-input--right">
<label class="mdl-textfield-expandable-icon mdl-label" for="sample-expandable">
<span class="mdl-textfield-expandable-icon-search"></span>
</label>
<div class="mdl-input__expandable-holder">
<label class="mdl-label" for="sample"></label>
</div>
</div>
</div>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" target="preview" href="test/visual/button.html">Buttons</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/card.html">Card</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/checkbox.html">Checkbox</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/footer.html">Footer</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/icon-toggle.html">Icon toggle</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/layout.html">Layout</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/list.html">List</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/menu.html">Menu</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/progress.html">Progress</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/radio.html">Radio</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/spinner.html">Spinner</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/slider.html">Slider</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/switch.html">Switch</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/tabs.html">Tabs</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/textfield.html">Textfield</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/tooltip.html">Tooltip</a>
<a class="mdl-navigation__link" target="preview" href="test/visual/typography.html">Typography</a>
</nav>
</div>
<iframe name="preview" class="mdl-layout__content" src="test/visual/welcome.html"></iframe>
</div>
</div>
<script src="js/material.js"></script>
</body>
</html>