mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
update button test
This commit is contained in:
Adam Bradley
@ -31,12 +31,14 @@
|
||||
<h3>a.button default</h3>
|
||||
<p>
|
||||
<a class="button"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light">.button-light</a>
|
||||
<a class="button button-stable">.button-stable</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
<a class="button button-royal">.button-royal</a>
|
||||
<a class="button button-dark"><i class="icon ion-home"></i> .button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -45,12 +47,14 @@
|
||||
<h3>button.button default</h3>
|
||||
<p>
|
||||
<button class="button"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-light"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-stable"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-calm">.button-calm</button>
|
||||
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-assertive">.button-assertive</button>
|
||||
<button class="button button-energized">.button-energized</button>
|
||||
<button class="button button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-calm">.button-calm</button>
|
||||
<button class="button button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
<button class="button button-royal"><i class="icon ion-home"></i> .button-royal</button>
|
||||
<button class="button button-dark"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
@ -59,12 +63,14 @@
|
||||
<h3>a.button.button-large default</h3>
|
||||
<p>
|
||||
<a class="button button-large"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-large button-light">.button-light</a>
|
||||
<a class="button button-large button-stable">.button-stable</a>
|
||||
<a class="button button-large button-positive">.button-positive</a>
|
||||
<a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-positive">.button-positive</a>
|
||||
<a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-large button-assertive">.button-assertive</a>
|
||||
<a class="button button-large button-royal">.button-royal</a>
|
||||
<a class="button button-large button-dark"><i class="icon ion-home"></i> .button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -73,12 +79,14 @@
|
||||
<h3>button.button. button-large default</h3>
|
||||
<p>
|
||||
<button class="button button-large"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-large button-light"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-stable"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-calm">.button-calm</button>
|
||||
<button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-large button-assertive">.button-assertive</button>
|
||||
<button class="button button-large button-energized">.button-energized</button>
|
||||
<button class="button button-large button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-calm">.button-calm</button>
|
||||
<button class="button button-large button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
<button class="button button-large button-royal"><i class="icon ion-home"></i> .button-royal</button>
|
||||
<button class="button button-large button-dark"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
@ -87,12 +95,14 @@
|
||||
<h3>a.button.button-small default</h3>
|
||||
<p>
|
||||
<a class="button button-small"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-small button-light"><i class="icon ion-home"></i> .button-light</a>
|
||||
<a class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</a>
|
||||
<a class="button button-small button-positive">.button-positive</a>
|
||||
<a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-positive">.button-positive</a>
|
||||
<a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-small button-assertive">.button-assertive</a>
|
||||
<a class="button button-small button-royal">.button-royal</a>
|
||||
<a class="button button-small button-dark"><i class="icon ion-home"></i> .button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -101,12 +111,14 @@
|
||||
<h3>button.button.button-small</h3>
|
||||
<p>
|
||||
<button class="button button-small"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-small button-light"><i class="icon ion-home"></i> .button-light</button>
|
||||
<button class="button button-small button-stable"><i class="icon ion-home"></i> .button-stable</button>
|
||||
<button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-small button-assertive">.button-assertive</button>
|
||||
<button class="button button-small button-energized">.button-energized</button>
|
||||
<button class="button button-small button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-small button-calm">.button-calm</button>
|
||||
<button class="button button-small button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
<button class="button button-small button-assertive">.button-assertive</button>
|
||||
<button class="button button-small button-energized">.button-energized</button>
|
||||
<button class="button button-small button-royal"><i class="icon ion-home"></i> .button-royal</button>
|
||||
<button class="button button-small button-dark"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
@ -115,12 +127,14 @@
|
||||
<h3>a.button.button-clear (Mixed in with others)</h3>
|
||||
<p>
|
||||
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light">.button-light</a>
|
||||
<a class="button button-stable">.button-stable</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-clear button-assertive">.button-assertive</a>
|
||||
<a class="button button-clear button-royal">.button-royal</a>
|
||||
<a class="button button-clear button-dark"><i class="icon ion-home"></i> .button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -130,11 +144,13 @@
|
||||
<p>
|
||||
<button class="button"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-clear button-assertive">.button-assertive</button>
|
||||
<button class="button button-clear button-energized">.button-energized</button>
|
||||
<button class="button button-clear button-light"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-clear button-stable"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-clear button-calm">.button-calm</button>
|
||||
<button class="button button-clear button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
<button class="button button-clear button-assertive">.button-assertive</button>
|
||||
<button class="button button-clear button-energized">.button-energized</button>
|
||||
<button class="button button-clear button-royal"><i class="icon ion-home"></i> .button-royal</button>
|
||||
<button class="button button-dark"><i class="icon ion-home"></i></button>
|
||||
</p>
|
||||
|
||||
@ -143,17 +159,14 @@
|
||||
<h3>a.block (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-royal">.button-royal</a>
|
||||
<a class="button block button-light">.button-light</a>
|
||||
<a class="button block button-stable">.button-stable</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-royal">.button-royal</a>
|
||||
<a class="button block button-dark">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -162,12 +175,14 @@
|
||||
<h3>button.block (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button block button-light">.button-light</button>
|
||||
<button class="button block button-stable">.button-stable</button>
|
||||
<button class="button block button-positive">.button-positive</button>
|
||||
<button class="button block button-calm">.button-calm</button>
|
||||
<button class="button block button-balanced">.button-balanced</button>
|
||||
<button class="button block button-assertive">.button-assertive</button>
|
||||
<button class="button block button-energized">.button-energized</button>
|
||||
<button class="button block button-positive">.button-positive</button>
|
||||
<button class="button block button-calm">.button-calm</button>
|
||||
<button class="button block button-assertive">.button-assertive</button>
|
||||
<button class="button block button-royal">.button-royal</button>
|
||||
<button class="button block button-dark">.button-dark</button>
|
||||
</p>
|
||||
|
||||
@ -204,12 +219,14 @@
|
||||
<h3>a.button-outline</h3>
|
||||
<p>
|
||||
<a class="button button-outline"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light button-outline">.button-light</a>
|
||||
<a class="button button-stable button-outline">.button-stable</a>
|
||||
<a class="button button-positive button-outline">.button-positive</a>
|
||||
<a class="button button-calm button-outline">.button-calm</a>
|
||||
<a class="button button-balanced button-outline">.button-balanced</a>
|
||||
<a class="button button-assertive button-outline">.button-assertive</a>
|
||||
<a class="button button-energized button-outline">.button-energized</a>
|
||||
<a class="button button-positive button-outline">.button-positive</a>
|
||||
<a class="button button-calm button-outline">.button-calm</a>
|
||||
<a class="button button-assertive button-outline">.button-assertive</a>
|
||||
<a class="button button-royal button-outline">.button-royal</a>
|
||||
<a class="button button-dark button-outline">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -218,12 +235,14 @@
|
||||
<h3>button.button-outline</h3>
|
||||
<p>
|
||||
<button class="button button-outline"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-light button-outline">.button-light</button>
|
||||
<button class="button button-stable button-outline">.button-stable</button>
|
||||
<button class="button button-positive button-outline">.button-positive</button>
|
||||
<button class="button button-calm button-outline">.button-calm</button>
|
||||
<button class="button button-balanced button-outline">.button-balanced</button>
|
||||
<button class="button button-assertive button-outline">.button-assertive</button>
|
||||
<button class="button button-energized button-outline">.button-energized</button>
|
||||
<button class="button button-positive button-outline">.button-positive</button>
|
||||
<button class="button button-calm button-outline">.button-calm</button>
|
||||
<button class="button button-assertive button-outline">.button-assertive</button>
|
||||
<button class="button button-royal button-outline">.button-royal</button>
|
||||
<button class="button button-dark button-outline">.button-dark</button>
|
||||
</p>
|
||||
|
||||
@ -232,12 +251,14 @@
|
||||
<h3>a.block.button-outline (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button button-outline block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light button-outline block">.button-light</a>
|
||||
<a class="button button-stable button-outline block">.button-stable</a>
|
||||
<a class="button button-positive button-outline block">.button-positive</a>
|
||||
<a class="button button-calm button-outline block">.button-calm</a>
|
||||
<a class="button button-balanced button-outline block">.button-balanced</a>
|
||||
<a class="button button-assertive button-outline block">.button-assertive</a>
|
||||
<a class="button button-energized button-outline block">.button-energized</a>
|
||||
<a class="button button-positive button-outline block">.button-positive</a>
|
||||
<a class="button button-calm button-outline block">.button-calm</a>
|
||||
<a class="button button-assertive button-outline block">.button-assertive</a>
|
||||
<a class="button button-royal button-outline block">.button-royal</a>
|
||||
<a class="button button-dark button-outline block">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -246,12 +267,14 @@
|
||||
<h3>button.block.button-outline (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button button-outline block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-light button-outline block">.button-light</button>
|
||||
<button class="button button-stable button-outline block">.button-stable</button>
|
||||
<button class="button button-positive button-outline block">.button-positive</button>
|
||||
<button class="button button-calm button-outline block">.button-calm</button>
|
||||
<button class="button button-balanced button-outline block">.button-balanced</button>
|
||||
<button class="button button-assertive button-outline block">.button-assertive</button>
|
||||
<button class="button button-energized button-outline block">.button-energized</button>
|
||||
<button class="button button-positive button-outline block">.button-positive</button>
|
||||
<button class="button button-calm button-outline block">.button-calm</button>
|
||||
<button class="button button-assertive button-outline block">.button-assertive</button>
|
||||
<button class="button button-royal button-outline block">.button-royal</button>
|
||||
<button class="button button-dark button-outline block">.button-dark</button>
|
||||
</p>
|
||||
|
||||
@ -260,12 +283,14 @@
|
||||
<h3>a.button-clear</h3>
|
||||
<p>
|
||||
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light button-clear">.button-light</a>
|
||||
<a class="button button-stable button-clear">.button-stable</a>
|
||||
<a class="button button-positive button-clear">.button-positive</a>
|
||||
<a class="button button-calm button-clear">.button-calm</a>
|
||||
<a class="button button-balanced button-clear">.button-balanced</a>
|
||||
<a class="button button-assertive button-clear">.button-assertive</a>
|
||||
<a class="button button-energized button-clear">.button-energized</a>
|
||||
<a class="button button-positive button-clear">.button-positive</a>
|
||||
<a class="button button-calm button-clear">.button-calm</a>
|
||||
<a class="button button-assertive button-clear">.button-assertive</a>
|
||||
<a class="button button-royal button-clear">.button-royal</a>
|
||||
<a class="button button-dark button-clear">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -274,12 +299,14 @@
|
||||
<h3>button.button-clear</h3>
|
||||
<p>
|
||||
<button class="button button-clear"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-light button-clear">.button-light</button>
|
||||
<button class="button button-stable button-clear">.button-stable</button>
|
||||
<button class="button button-positive button-clear">.button-positive</button>
|
||||
<button class="button button-calm button-clear">.button-calm</button>
|
||||
<button class="button button-balanced button-clear">.button-balanced</button>
|
||||
<button class="button button-assertive button-clear">.button-assertive</button>
|
||||
<button class="button button-energized button-clear">.button-energized</button>
|
||||
<button class="button button-positive button-clear">.button-positive</button>
|
||||
<button class="button button-calm button-clear">.button-calm</button>
|
||||
<button class="button button-assertive button-clear">.button-assertive</button>
|
||||
<button class="button button-royal button-clear">.button-royal</button>
|
||||
<button class="button button-dark button-clear">.button-dark</button>
|
||||
</p>
|
||||
|
||||
@ -288,12 +315,14 @@
|
||||
<h3>a.block.button-clear (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button button-clear block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light button-clear block">.button-light</a>
|
||||
<a class="button button-stable button-clear block">.button-stable</a>
|
||||
<a class="button button-positive button-clear block">.button-positive</a>
|
||||
<a class="button button-calm button-clear block">.button-calm</a>
|
||||
<a class="button button-balanced button-clear block">.button-balanced</a>
|
||||
<a class="button button-assertive button-clear block">.button-assertive</a>
|
||||
<a class="button button-energized button-clear block">.button-energized</a>
|
||||
<a class="button button-positive button-clear block">.button-positive</a>
|
||||
<a class="button button-calm button-clear block">.button-calm</a>
|
||||
<a class="button button-assertive button-clear block">.button-assertive</a>
|
||||
<a class="button button-royal button-clear block">.button-royal</a>
|
||||
<a class="button button-dark button-clear block">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -302,12 +331,14 @@
|
||||
<h3>button.block.button-clear (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button button-clear block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-light button-clear block">.button-light</button>
|
||||
<button class="button button-stable button-clear block">.button-stable</button>
|
||||
<button class="button button-positive button-clear block">.button-positive</button>
|
||||
<button class="button button-calm button-clear block">.button-calm</button>
|
||||
<button class="button button-balanced button-clear block">.button-balanced</button>
|
||||
<button class="button button-assertive button-clear block">.button-assertive</button>
|
||||
<button class="button button-energized button-clear block">.button-energized</button>
|
||||
<button class="button button-positive button-clear block">.button-positive</button>
|
||||
<button class="button button-calm button-clear block">.button-calm</button>
|
||||
<button class="button button-assertive button-clear block">.button-assertive</button>
|
||||
<button class="button button-royal button-clear block">.button-royal</button>
|
||||
<button class="button button-dark button-clear block">.button-dark</button>
|
||||
</p>
|
||||
|
||||
@ -318,12 +349,14 @@
|
||||
<h3>a.block (parent w/out padding)</h3>
|
||||
<p>
|
||||
<a class="button block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button block button-light">.button-light</a>
|
||||
<a class="button block button-stable">.button-stable</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-royal">.button-royal</a>
|
||||
<a class="button block button-dark">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -332,12 +365,14 @@
|
||||
<h3>a.block (.button-full on the parent)</h3>
|
||||
<p class="button-full">
|
||||
<a class="button"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-light">.button-light</a>
|
||||
<a class="button button-stable">.button-stable</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm">.button-calm</a>
|
||||
<a class="button button-balanced">.button-balanced</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
<a class="button button-energized">.button-energized</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm">.button-calm</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
<a class="button button-royal">.button-royal</a>
|
||||
<a class="button button-dark">.button-dark</a>
|
||||
</p>
|
||||
|
||||
@ -346,12 +381,14 @@
|
||||
<h3>button.block.button-full on each button and nothing on the parent</h3>
|
||||
<p>
|
||||
<button class="button button-full"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-full button-light">.button-light</button>
|
||||
<button class="button button-full button-stable">.button-stable</button>
|
||||
<button class="button button-full button-positive">.button-positive</button>
|
||||
<button class="button button-full button-calm">.button-calm</button>
|
||||
<button class="button button-full button-balanced">.button-balanced</button>
|
||||
<button class="button button-full button-assertive">.button-assertive</button>
|
||||
<button class="button button-full button-energized">.button-energized</button>
|
||||
<button class="button button-full button-positive">.button-positive</button>
|
||||
<button class="button button-full button-calm">.button-calm</button>
|
||||
<button class="button button-full button-assertive">.button-assertive</button>
|
||||
<button class="button button-full button-royal">.button-royal</button>
|
||||
<button class="button button-full button-dark">.button-dark</button>
|
||||
</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user