materialize-css
Version:
Builds Materialize distribution packages
296 lines (266 loc) • 10.2 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Materialize - Documentation</title>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
<!-- Android 5 Chrome Color -->
<meta name="theme-color" content="#EE6E73">
<link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!-- <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
<!-- <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
<link href="../../../css/prism.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s4">
<i class="material-icons prefix">account_circle</i>
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s4">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
<div class="input-field col s4">
<select>
<option value="" disabled >Choose your option</option>
<option value="1">Option 1</option>
<option value="2"selected>Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<p>Make sure these textareas are aligned correctly.</p>
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="textarea-prefix" class="materialize-textarea"></textarea>
<label for="textarea-prefix">Text area with a prefix</label>
</div>
<div class="input-field col s6">
<textarea id="textarea-normal" class="materialize-textarea"></textarea>
<label for="textarea-normal">Text area</label>
</div>
</div>
<div class="row">
<p>Make sure error message and label don't overlap.</p>
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
<div class="input-field col s6">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
</div>
</form>
</div>
<nav>
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
<br>
<br>
<h3>Select</h3>
<!-- materialize select multiple -->
<div class="row">
<div class="input-field col s4">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select Multiple</label>
</div>
<!-- second materialize select multiple -->
<div class="input-field col s4">
<select multiple>
<option value="" disabled >Choose your option</option>
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<label>Materialize Select Multiple with selected</label>
</div>
<!-- materialize select multiple with overflow -->
<div class="input-field col s4">
<select multiple>
<option value="" disabled >Choose your option</option>
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
<option value="11">Option 11</option>
</select>
<label>Materialize Select Multiple with overflow</label>
</div>
</div>
<!-- select with optgroups -->
<div class="row">
<div class="input-field col s6">
<select>
<optgroup label="team 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</optgroup>
<optgroup label="team 3">
<option value="5" disabled>Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
<label>Materialize Select optgroups</label>
</div>
<!-- select with optgroups -->
<div class="input-field col s6">
<select>
<optgroup label="team 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
</optgroup>
<optgroup label="team 3">
<option value="5" disabled>Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
<label>Materialize Select optgroups with selected</label>
</div>
</div>
<!-- select with overflow -->
<div class="row">
<div class="input-field col s6">
<select>
<option value="" disabled >Choose your option</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<label>Materialize Select with overflow</label>
</div>
<div class="input-field col s6">
<select id="optgroups-select">
<option>Option before optgroup</option>
<optgroup label="Optgroup">
<option>Option inside optigroup 1</option>
<option>Option inside optigroup 2</option>
</optgroup>
<option>Option after optgroup</option>
</select>
<label>Optgroup in the middle of non optgroup options.</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline select:
<div class="input-field inline">
<select>
<option value="" disabled >Choose your option</option>
<option value="1">Option 1</option>
<option value="2"selected>Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
</div>
<div class="row">
<h2>Select Icons</h2>
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1" data-icon="http://placehold.it/50x50" class="circle">Option 1</option>
<option value="2" data-icon="http://placehold.it/50x50" class="circle right">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select Multiple</label>
</div>
<div class="input-field col s12">
<select>
<optgroup label="team 1">
<option value="1" data-icon="http://placehold.it/50x50" class="circle">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="team 2">
<option value="3" data-icon="http://placehold.it/50x50" class="circle right">Option 3</option>
<option value="4" selected>Option 4</option>
</optgroup>
<optgroup label="team 3">
<option value="5" disabled>Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
<label>Materialize Select Multiple</label>
</div>
</div>
<form action="#" class="row">
<p class="range-field col s6">
<input type="range" id="test5" min="0" max="100" />
</p>
</form>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="../../../bin/materialize.js"></script>
<!-- <script src="js/velocity.min.js"></script>-->
<!-- <script src="js/leanModal.js"></script>-->
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>
</body>
</html>