javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

material buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-04-03 21:54:17 -05:00
parent 738436834c
commit f62577b8c0
12 changed files with 261 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/button/test/basic/main.html
View File

@@ -1,49 +1,49 @@
<p>
<div>
<a class="button" href="#">a (default)</a>
<button class="button">button (default)</button>
<button class="button hover">hover</button>
<button class="button activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-primary" href="#">a.primary</a>
<button class="button button-primary">button.primary</button>
<button class="button button-primary hover">hover</button>
<button class="button button-primary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-secondary" href="#">a.secondary</a>
<button class="button button-secondary">button.secondary</button>
<button class="button button-secondary hover">hover</button>
<button class="button button-secondary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-danger" href="#">a.danger</a>
<button class="button button-danger">button.danger</button>
<button class="button button-danger hover">hover</button>
<button class="button button-danger activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-light" href="#">a.light</a>
<button class="button button-light">button.light</button>
<button class="button button-light hover">hover</button>
<button class="button button-light activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-stable" href="#">a.stable</a>
<button class="button button-stable">button.stable</button>
<button class="button button-stable hover">hover</button>
<button class="button button-stable activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-dark" href="#">a.dark</a>
<button class="button button-dark">button.dark</button>
<button class="button button-dark hover">hover</button>
<button class="button button-dark activated">activated</button>
</p>
</div>

12
src/components/button/test/block/main.html
View File

@@ -1,19 +1,19 @@
<div class="padding">
<p>
<div>
<a class="button button-block button-primary" href="#">a.button-block</a>
<button class="button button-block button-primary">button.button-block</button>
</p>
</div>
<p>
<div>
<a class="button button-block button-outline button-primary" href="#">a.button-block</a>
<button class="button button-block button-outline button-primary">button.button-block</button>
</p>
</div>
<p>
<div>
<a class="button button-block button-clear button-primary" href="#">a.button-block</a>
<button class="button button-block button-clear button-primary">button.button-block</button>
</p>
</div>
</div>

28
src/components/button/test/clear/main.html
View File

@@ -1,49 +1,49 @@
<p>
<div>
<a class="button button-clear" href="#">a (default)</a>
<button class="button button-clear">button (default)</button>
<button class="button button-clear hover">hover</button>
<button class="button button-clear activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-primary" href="#">a.primary</a>
<button class="button button-clear button-primary">button.primary</button>
<button class="button button-clear button-primary hover">hover</button>
<button class="button button-clear button-primary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-secondary" href="#">a.secondary</a>
<button class="button button-clear button-secondary">button.secondary</button>
<button class="button button-clear button-secondary hover">hover</button>
<button class="button button-clear button-secondary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-danger" href="#">a.danger</a>
<button class="button button-clear button-danger">button.danger</button>
<button class="button button-clear button-danger hover">hover</button>
<button class="button button-clear button-danger activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-light" href="#">a.light</a>
<button class="button button-clear button-light">button.light</button>
<button class="button button-clear button-light hover">hover</button>
<button class="button button-clear button-light activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-stable" href="#">a.stable</a>
<button class="button button-clear button-stable">button.stable</button>
<button class="button button-clear button-stable hover">hover</button>
<button class="button button-clear button-stable activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-dark" href="#">a.dark</a>
<button class="button button-clear button-dark">button.dark</button>
<button class="button button-clear button-dark hover">hover</button>
<button class="button button-clear button-dark activated">activated</button>
</p>
</div>

12
src/components/button/test/full/main.html
View File

@@ -1,15 +1,15 @@
<p>
<div>
<a class="button button-full button-primary" href="#">a.button-full</a>
<button class="button button-full button-primary">button.button-full</button>
</p>
</div>
<p>
<div>
<a class="button button-full button-outline button-primary" href="#">a.button-full</a>
<button class="button button-full button-outline button-primary">button.button-full</button>
</p>
</div>
<p>
<div>
<a class="button button-full button-clear button-primary" href="#">a.button-full</a>
<button class="button button-full button-clear button-primary">button.button-full</button>
</p>
</div>

36
src/components/button/test/icons/main.html
View File

@@ -1,79 +1,79 @@
<div class="padding">
<p>
<div>
<button class="button button-primary ion-home icon-left">
Left Icon
</button>
<a class="button button-primary ion-home icon-left">
Left Icon
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary ion-star icon-right">
Right Icon
</button>
<a class="button button-primary ion-star icon-right">
Right Icon
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary ion-ionic button-icon">
</button>
<a class="button button-primary ion-ionic button-icon">
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary button-large ion-home icon-left">
Left, Large
</button>
<a class="button button-primary button-large ion-home icon-left">
Left, Large
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary button-large ion-star icon-right">
Right, Large
</button>
<a class="button button-primary button-large ion-star icon-right">
Right, Large
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary ion-ionic button-icon button-large">
</button>
<a class="button button-primary ion-ionic button-icon button-large">
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary button-small ion-home icon-left">
Left Icon, Small
</button>
<a class="button button-primary button-small ion-home icon-left">
Left Icon, Small
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary button-small ion-star icon-right">
Right Icon, Small
</button>
<a class="button button-primary button-small ion-star icon-right">
Right Icon, Small
</a>
</p>
</div>
<p>
<div>
<button class="button button-primary ion-ionic button-icon button-small">
</button>
<a class="button button-primary ion-ionic button-icon button-small">
</a>
</p>
</div>
</div>

24
src/components/button/test/outline/main.html
View File

@@ -1,42 +1,42 @@
<p>
<div>
<a class="button button-outline button-primary" href="#">a.primary</a>
<button class="button button-outline button-primary">button.primary</button>
<button class="button button-outline button-primary hover">hover</button>
<button class="button button-outline button-primary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-secondary" href="#">a.secondary</a>
<button class="button button-outline button-secondary">button.secondary</button>
<button class="button button-outline button-secondary hover">hover</button>
<button class="button button-outline button-secondary activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-danger" href="#">a.danger</a>
<button class="button button-outline button-danger">button.danger</button>
<button class="button button-outline button-danger hover">hover</button>
<button class="button button-outline button-danger activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-light" href="#">a.light</a>
<button class="button button-outline button-light">button.light</button>
<button class="button button-outline button-light hover">hover</button>
<button class="button button-outline button-light activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-stable" href="#">a.stable</a>
<button class="button button-outline button-stable">button.stable</button>
<button class="button button-outline button-stable hover">hover</button>
<button class="button button-outline button-stable activated">activated</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-dark" href="#">a.dark</a>
<button class="button button-outline button-dark">button.dark</button>
<button class="button button-outline button-dark hover">hover</button>
<button class="button button-outline button-dark activated">activated</button>
</p>
</div>

20
src/components/button/test/sizes/main.html
View File

@@ -1,23 +1,23 @@
<p>
<div>
<a class="button button-primary" href="#">a (default)</a>
<button class="button button-primary">button (default)</button>
</p>
</div>
<p>
<div>
<a class="button button-small button-primary" href="#">a.small</a>
<button class="button button-small button-primary">button.small</button>
<a class="button button-outline button-small button-primary" href="#">a.outline.small</a>
<button class="button button-outline button-small button-primary">button.outline.small</button>
</p>
</div>
<p>
<div>
<a class="button button-clear button-small button-primary" href="#">a.clear.small</a>
<button class="button button-clear button-small button-primary">button.clear.small</button>
</p>
</div>
<p>
<div>
<a class="button button-large button-primary" href="#">
<span style="font-size:48px">H</span>
<span style="font-size:38px">E</span>
@@ -25,12 +25,12 @@
<span style="font-size:24px">L</span>
O</a>
<button class="button button-large button-primary">button</button>
</p>
</div>
<p>
<div>
<a class="button button-outline button-large button-primary" href="#">a</a>
<button class="button button-outline button-large button-primary">button</button>
<a class="button button-clear button-large button-primary" href="#">a</a>
<button class="button button-clear button-large button-primary">button</button>
</p>
</div>