106 lines
4.4 KiB
HTML
106 lines
4.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>wsk-textfield</title>
|
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
|
|
<link href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="preview-block">
|
|
<form action="#">
|
|
<div class="wsk-input">
|
|
<input class="wsk-textfield wsk-js-textfield" type="text" name="sample" />
|
|
<label class="wsk-label" for="sample">Type Something...</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<input class="wsk-textfield wsk-js-textfield" type="text" pattern="[0-9]*" name="sample" />
|
|
<label class="wsk-label" for="sample">Numbers Only</label>
|
|
<span class="wsk-input__error">Input is not a number!</span>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<input class="wsk-textfield wsk-js-textfield" type="text" disabled name="sample" />
|
|
<label class="wsk-label" class="wsk-label" for="sample">I'm Disabled</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" name="sample" />
|
|
<label for="sample">Text Input</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" pattern="[0-9]*" name="sample" />
|
|
<label class="wsk-label" for="sample">Numbers Only</label>
|
|
<span class="wsk-input__error">Input is not a number!</span>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<textarea class="wsk-textfield wsk-js-textfield" type="text" rows= "1" name="sample" ></textarea>
|
|
<label class="wsk-label" for="sample">Type multiple lines here...</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<textarea class="wsk-textfield wsk-js-textfield" type="text" rows="3" name="sample" ></textarea>
|
|
<label class="wsk-label" for="sample">This input is 3 rows high</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<textarea class="wsk-textfield wsk-js-textfield" type="text" maxrows="3" rows="1" name="sample" ></textarea>
|
|
<label class="wsk-label" for="sample">This input is at most 3 rows high</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<textarea class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" rows= "1" name="sample" ></textarea>
|
|
<label class="wsk-label" for="sample">Multiple lines and a floating label</label>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expandable">
|
|
<span class="wsk-textfield-expandable-icon-search"></span>
|
|
</label>
|
|
<div class="wsk-input__expandable-holder">
|
|
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable" type="text" name="sample" id="sample-expandable" />
|
|
<label class="wsk-label" for="sample">Expandable Input</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wsk-input">
|
|
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expandable-floating">
|
|
<span class="wsk-textfield-expandable-icon-search"></span>
|
|
</label>
|
|
<div class="wsk-input__expandable-holder">
|
|
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label" type="text" name="sample" id="sample-expandable-floating" />
|
|
<label class="wsk-label" for="sample">Expandable & Floating Input</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wsk-input wsk-input--right wsk-input--large">
|
|
Right/No Label:
|
|
<label class="wsk-textfield-expandable-icon wsk-label" for="sample-expclean">
|
|
<span class="wsk-textfield-expandable-icon-search"></span>
|
|
</label>
|
|
<div class="wsk-input__expandable-holder">
|
|
<input class="wsk-textfield wsk-js-textfield wsk-textfield--expandable" type="text" name="sample" id="sample-expclean" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<!-- build:js(app/styleguide/textfield/) ../../scripts/main.min.js -->
|
|
<script src="textfield.js"></script>
|
|
<script src="../third_party/rAF.js"></script>
|
|
<script src="../ripple/ripple.js"></script>
|
|
<!-- endbuild -->
|
|
|
|
</body>
|
|
</html>
|