javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

text inputs

Browse Source
This commit is contained in:
Adam Bradley
2013-09-09 19:06:22 -05:00
parent 4a963f41f3
commit c18dded02c
6 changed files with 818 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
example/input-text.html
View File

@ -25,72 +25,108 @@
<h3>Default Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper">
<input type="text" placeholder="Email">
<input type="text" placeholder="First Name">
</label>
<label class="input-wrapper">
<input type="text" placeholder="Last Name">
</label>
<label class="input-wrapper">
<input type="email" placeholder="Email">
</label>
<h3>Default Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset">
<input type="text" placeholder="Email">
<input type="email" placeholder="Email">
</label>
<div class="content-padded">
<h3>Default Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper">
<input type="text" placeholder="Email">
<input type="email" placeholder="Email">
</label>
<h3>Default Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset">
<input type="text" placeholder="Email">
<input type="email" placeholder="Email">
</label>
</div>
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper row-fluid inset">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<div class="content-padded">
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper row-fluid">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper row-fluid inset">
<span class="input-label span3">Email</span>
<input class="span9" type="text" placeholder="your@email.com">
</label>
</div>
<hr>
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
<label class="input-wrapper">
<span class="input-label">Email</span>
<label class="input-wrapper stacked-label">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
<label class="input-wrapper inset">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
<label class="input-wrapper stacked-label inset">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<div class="content-padded">
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
<label class="input-wrapper">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
<label class="input-wrapper stacked-label">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
<label class="input-wrapper inset">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
<label class="input-wrapper stacked-label inset">
<span>Email</span>
<input type="text" placeholder="your@email.com">
</label>
</div>
<hr>
<h3>Inline Labeled Input</h3>
<label class="embed">
<span>Email:</span>
<input type="text" placeholder="your@email.com">
</label>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</div>
</section>