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

docs(demos): prettify label demo

Browse Source
This commit is contained in:
Brandy Carney
2016-02-03 12:10:26 -05:00
parent 7e06e6c563
commit 234ab90fd0
2 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
demos/label/ionic.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#4E8EF7;}
]]>
</style>
<g>
<path class="st0" d="M434.6,121.3c4.5-5.4,7.2-12.4,7.2-20c0-17.3-14-31.3-31.3-31.3c-7.6,0-14.5,2.7-20,7.2
C353,48.8,306.3,32,255.8,32c-123.5,0-224,100.5-224,224c0,123.5,100.5,224,224,224s224-100.5,224-224
C479.8,205.4,463,158.8,434.6,121.3z M255.8,471c-118.6,0-215-96.5-215-215c0-118.6,96.5-215,215-215c48.2,0,92.8,16,128.7,42.8
c-3.4,5-5.3,11-5.3,17.5c0,17.3,14,31.3,31.3,31.3c6.5,0,12.5-2,17.5-5.3c26.9,35.9,42.8,80.5,42.8,128.7
C470.8,374.5,374.3,471,255.8,471z"/>
<ellipse class="st0" cx="255.8" cy="256" rx="96.2" ry="96.1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

70
demos/label/main.html
View File

@ -2,31 +2,67 @@
<ion-title>Label</ion-title>
</ion-navbar>
<ion-content>
<ion-row>
<ion-item>
<ion-input placeholder="Placeholder Label"></ion-input>
<ion-content class="label-demo">
<ion-list>
<ion-item no-lines>
<ion-avatar item-left>
<img src="ionic.svg">
</ion-avatar>
<ion-label>Ionic</ion-label>
</ion-item>
</ion-row>
<ion-row>
<!-- TODO the styling of the icons can be removed when #5319 is done -->
<ion-item>
<ion-label fixed>Fixed Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Mobile</ion-label>
<ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
<ion-icon primary item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
<ion-icon primary item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
</ion-item>
</ion-row>
<ion-row>
<ion-item>
<ion-label floating>Floating Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Email</ion-label>
<ion-input type="email" value="hi@ionic.io"></ion-input>
</ion-item>
</ion-row>
<ion-row>
<ion-item>
<ion-label stacked>Stacked Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Birthday</ion-label>
<ion-input type="text" value="November 21, 2013"></ion-input>
</ion-item>
</ion-row>
<ion-item>
<ion-label stacked primary>Address</ion-label>
<ion-textarea
value="121 S Pinckney St
Madison WI 53703
United States">
</ion-textarea>
</ion-item>
<ion-item>
<ion-label stacked dark>Notes</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<button ion-item detail-none>
<ion-label primary>Send Message</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Share Contact</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Add to Favorites</ion-label>
</button>
</ion-list>
</ion-content>
<style>
.label-demo .mobile1, .label-demo .mobile2 {
position: absolute;
right: 5px;
bottom: 5px;
}
.label-demo .mobile1 {
right: 35px;
}
</style>