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

button demo updates

Browse Source
This commit is contained in:
Adam Bradley
2015-07-23 08:15:47 -05:00
parent 96a84e593b
commit 9d5b22cb3b
8 changed files with 215 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/button/button.scss
View File

@ -183,8 +183,6 @@ button,
.icon {
flex: 1;
//width: 24px;
//height: 24px;
}
}
}

60
ionic/components/button/test/basic/main.html
View File

@ -1,30 +1,46 @@
<div class="padding">
<div>
<button>Default</button>
</div>
<div class="padding" style="text-align:center">
<div>
<button primary>Primary</button>
</div>
<p>
<button>D</button>
<button class="hover">D.hover</button>
<button class="activated">D.activated</button>
</p>
<div>
<button secondary>Secondary</button>
</div>
<p>
<button primary>P</button>
<button primary class="hover">P.hover</button>
<button primary class="activated">P.activated</button>
</p>
<div>
<button danger>Danger</button>
</div>
<p>
<button secondary>S</button>
<button secondary class="hover">S.hover</button>
<button secondary class="activated">S.activated</button>
</p>
<div>
<button light>Light</button>
</div>
<p>
<button danger>D</button>
<button danger class="hover">D.hover</button>
<button danger class="activated">D.activated</button>
</p>
<div>
<button stable>Stable</button>
</div>
<p>
<button light>L</button>
<button light class="hover">L.hover</button>
<button light class="activated">L.activated</button>
</p>
<p>
<button stable>S</button>
<button stable class="hover">S.hover</button>
<button stable class="activated">S.activated</button>
</p>
<p>
<button dark>D</button>
<button dark class="hover">D.hover</button>
<button dark class="activated">D.activated</button>
</p>
<div>
<button dark>Dark</button>
</div>
</div>

41
ionic/components/button/test/block/main.html
View File

@ -1,26 +1,29 @@
<div class="padding">
<div>
<a button block primary href="#">a[button][block]</a>
<button block primary>button[button][block]</button>
</div>
<p>
<a button block href="#">a[button][block]</a>
<button block>button[block]</button>
</p>
<div>
<a button block outline primary href="#">a[button][block][outline]</a>
<button block outline primary>button[block][outline</button>
</div>
<p>
<a button block primary href="#">a[button][block][primary]</a>
<button block primary>button[block][primary]</button>
</p>
<div>
<a button block clear primary href="#">a[button][block][clear]</a>
<button block clear primary>button[button][block]</button>
</div>
<p>
<a button block outline secondary href="#">a[button][block][outline][secondary]</a>
<button block outline secondary>button[block][outline</button>
</p>
<p>
<a button block clear stable href="#">a[button][block][clear]</a>
<button block clear stable>button[block]</button>
</p>
<p>
<a button block full danger>a[button][block][full][danger]</a>
<button block full clear danger>button[block][full][danger]</a>
</p>
<div>
<a button block full primary>Full</a>
<button block full clear danger>Full</a>
</div>
</div>
<style>
button, [button] { margin-bottom: 20px !important; }
</style>

59
ionic/components/button/test/clear/main.html
View File

@ -1,15 +1,46 @@
<div>
<button clear primary>Primary</button>
<button clear secondary>Secondary</button>
<button clear danger>Danger</button>
<button clear light>Light</button>
<button clear stable>Stable</button>
<button clear dark>Dark</button>
</div>
<style>
button, [button] {
display: block !important;
margin: 10px auto 10px auto !important;
}
</style>
<div class="padding" style="text-align:center">
<p>
<button clear>D</button>
<button clear class="hover">D.hover</button>
<button clear class="activated">D.activated</button>
</p>
<p>
<button clear primary>P</button>
<button clear primary class="hover">P.hover</button>
<button clear primary class="activated">P.activated</button>
</p>
<p>
<button clear secondary>S</button>
<button clear secondary class="hover">S.hover</button>
<button clear secondary class="activated">S.activated</button>
</p>
<p>
<button clear danger>D</button>
<button clear danger class="hover">D.hover</button>
<button clear danger class="activated">D.activated</button>
</p>
<p>
<button clear light>L</button>
<button clear light class="hover">L.hover</button>
<button clear light class="activated">L.activated</button>
</p>
<p>
<button clear stable>S</button>
<button clear stable class="hover">S.hover</button>
<button clear stable class="activated">S.activated</button>
</p>
<p>
<button clear dark>D</button>
<button clear dark class="hover">D.hover</button>
<button clear dark class="activated">D.activated</button>
</p>
</div>

17
ionic/components/button/test/full/main.html
View File

@ -1,15 +1,20 @@
<div>
<a button full primary href="#">a[button][full]</a>
<button full primary>button[full]</button>
<a button full href="#">a[button][full]</a>
<button full>button[full]</button>
</div>
<div>
<a button full outline primary href="#">a[button][full][outline]</a>
<button full outline primary>button[full][outline]</button>
<a button full primary href="#">a[button][full][primary]</a>
<button full primary>button[full][primary]</button>
</div>
<div>
<a button full clear primary href="#">a[button][full][clear]</a>
<button full clear primary>button[full][clear]</button>
<a button full outline primary href="#">a[button][full][outline][primary]</a>
<button full outline primary>button[full][outline][primary]</button>
</div>
<div>
<a button full clear primary href="#">a[button][full][clear][primary]</a>
<button full clear primary>button[full][clear][primary]</button>
</div>

70
ionic/components/button/test/outline/main.html
View File

@ -1,16 +1,58 @@
<div>
<button outline primary>Primary</button>
<button outline secondary>Secondary</button>
<button outline danger>Danger</button>
<button outline light>Light</button>
<button outline stable>Stable</button>
<button outline dark>Dark</button>
<div class="padding" style="text-align:center">
<p>
<button outline>D</button>
<button outline class="hover">D.hover</button>
<button outline class="activated">D.activated</button>
</p>
<p>
<button outline primary>P</button>
<button outline primary class="hover">P.hover</button>
<button outline primary class="activated">P.activated</button>
</p>
<p>
<button outline secondary>S</button>
<button outline secondary class="hover">S.hover</button>
<button outline secondary class="activated">S.activated</button>
</p>
<p>
<button outline danger>D</button>
<button outline danger class="hover">D.hover</button>
<button outline danger class="activated">D.activated</button>
</p>
<p>
<button outline light>L</button>
<button outline light class="hover">L.hover</button>
<button outline light class="activated">L.activated</button>
</p>
<p>
<button outline stable>S</button>
<button outline stable class="hover">S.hover</button>
<button outline stable class="activated">S.activated</button>
</p>
<p>
<button outline dark>D</button>
<button outline dark class="hover">D.hover</button>
<button outline dark class="activated">D.activated</button>
</p>
<p>
<button outline primary block>button[outline][block][primary]</button>
</p>
<p>
<button outline primary block class="hover">[outline][block][primary].hover</button>
</p>
<p>
<button outline primary block class="activated">[outline][block][primary].activated</button>
</p>
</div>
<style>
button, [button] {
display: block !important;
margin: 10px auto 10px auto !important;
}
</style>

5
ionic/components/button/test/round/main.html
View File

@ -16,9 +16,6 @@
<style>
button {
display: block !important;
margin: 15px auto !important;
}
button:first-child {
margin-top: 0px !important;
margin: 8px auto !important;
}
</style>

76
ionic/components/button/test/sizes/main.html
View File

@ -1,36 +1,44 @@
<div>
<a button primary href="#">a[button]</a>
<button primary>button</button>
</div>
<div>
<a button small primary href="#">a[small]</a>
<button small primary>button[small]</button>
<a button outline small primary href="#">a[outline][small]</a>
<button outline small primary>button[outline][small]</button>
</div>
<div>
<a button clear small primary href="#">a[clear][small]</a>
<button clear small primary>button[clear][small]</button>
</div>
<div>
<a button large primary href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
<span style="font-size:32px">L</span>
<span style="font-size:24px">L</span>
O</a>
<button large primary>button</button>
</div>
<div>
<a button outline large primary href="#">a</a>
<button outline large primary>button</button>
<a button clear large primary href="#">a</a>
<button clear large primary>button</button>
<div class="padding">
<p>
<a button primary href="#">a[button]</a>
<button primary>button</button>
</p>
<p>
<a button small primary href="#">a[button][small]</a>
<button small primary>button[small]</button>
</p>
<p>
<a button outline small primary href="#">a[button][outline][small]</a>
<button outline small primary>button[outline][small]</button>
</p>
<p>
<a button clear small primary href="#">a[button][clear][small]</a>
<button clear small primary>button[clear][small]</button>
</p>
<p>
<button large primary>[large]</button>
<a button large primary href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
<span style="font-size:32px">L</span>
<span style="font-size:24px">L</span>
O</a>
</p>
<p>
<a button outline large primary href="#">a[button][outline][large]</a>
<button outline large primary>button[outline][large]</button>
</p>
<p>
<a button clear large primary href="#">a[clear][large]</a>
<button clear large primary>button[clear][large]</button>
</p>
</div>