mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
368 lines
18 KiB
HTML
368 lines
18 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Buttons</title>
|
|
|
|
<!-- Sets initial viewport load and disables zooming -->
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<link href="../dist/css/ionic.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
backgrbackground: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(31%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* IE10+ */
|
|
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-dark">
|
|
<h1 class="title">Buttons</h1>
|
|
</header>
|
|
|
|
<main class="content has-header overflow-scroll">
|
|
|
|
<div class="padding">
|
|
|
|
<h3>a.button default</h3>
|
|
<p>
|
|
<a class="button"><i class="icon ion-home"></i> Default</a>
|
|
<a class="button button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
|
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
|
<a class="button button-tertiary"><i class="icon ion-home"></i> .button-tertiary</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-dark"><i class="icon ion-home"></i> .button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.button default</h3>
|
|
<p>
|
|
<button class="button"><i class="icon ion-home"></i> Default</button>
|
|
<button class="button button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
|
<button class="button button-secondary">.button-secondary</button>
|
|
<button class="button button-tertiary">.button-tertiary</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-dark"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary"><i class="icon ion-home"></i> .button-primary</a>
|
|
<a class="button button-large button-secondary"><i class="icon ion-home"></i></a>
|
|
<a class="button button-large button-tertiary"><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-dark"><i class="icon ion-home"></i> .button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary"><i class="icon ion-home"></i> .button-primary</button>
|
|
<button class="button button-large button-secondary">.button-secondary</button>
|
|
<button class="button button-large button-tertiary">.button-tertiary</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-dark"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary"><i class="icon ion-home"></i> .button-primary</a>
|
|
<a class="button button-small button-secondary"><i class="icon ion-home"></i></a>
|
|
<a class="button button-small button-tertiary"><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-dark"><i class="icon ion-home"></i> .button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary"><i class="icon ion-home"></i> .button-primary</button>
|
|
<button class="button button-small button-secondary">.button-secondary</button>
|
|
<button class="button button-small button-tertiary">.button-tertiary</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-dark"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-clear button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
|
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
|
<a class="button button-clear button-tertiary"><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-dark"><i class="icon ion-home"></i> .button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.button.button-clear default</h3>
|
|
<p>
|
|
<button class="button"><i class="icon ion-home"></i> Default</button>
|
|
<button class="button button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
|
<button class="button button-clear button-secondary">.button-secondary</button>
|
|
<button class="button button-clear button-tertiary">.button-tertiary</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-dark"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary">.button-primary</a>
|
|
<a class="button block button-secondary">.button-secondary</a>
|
|
<a class="button block button-tertiary">.button-tertiary</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-dark">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary">.button-primary</button>
|
|
<button class="button block button-secondary">.button-secondary</button>
|
|
<button class="button block button-tertiary">.button-tertiary</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-dark">.button-dark</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>a.button-icon (Borderless, 32px)</h3>
|
|
<p>
|
|
<a class="button button-icon"><i class="icon ion-home"></i></a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.button-icon (Borderless, 32px)</h3>
|
|
<p>
|
|
<button class="button button-icon"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>a.block.button-icon (Borderless, 32px)</h3>
|
|
<p>
|
|
<a class="button block button-icon"><i class="icon ion-home"></i></a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.block.button-icon (Borderless, 32px)</h3>
|
|
<p>
|
|
<button class="button block button-icon"><i class="icon ion-home"></i></button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>a.button-outline</h3>
|
|
<p>
|
|
<a class="button button-outline"><i class="icon ion-home"></i> Default</a>
|
|
<a class="button button-primary button-outline">.button-primary</a>
|
|
<a class="button button-secondary button-outline">.button-secondary</a>
|
|
<a class="button button-tertiary button-outline">.button-tertiary</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-dark button-outline">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.button-outline</h3>
|
|
<p>
|
|
<button class="button button-outline"><i class="icon ion-home"></i> Default</button>
|
|
<button class="button button-primary button-outline">.button-primary</button>
|
|
<button class="button button-secondary button-outline">.button-secondary</button>
|
|
<button class="button button-tertiary button-outline">.button-tertiary</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-dark button-outline">.button-dark</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary button-outline block">.button-primary</a>
|
|
<a class="button button-secondary button-outline block">.button-secondary</a>
|
|
<a class="button button-tertiary button-outline block">.button-tertiary</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-dark button-outline block">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary button-outline block">.button-primary</button>
|
|
<button class="button button-secondary button-outline block">.button-secondary</button>
|
|
<button class="button button-tertiary button-outline block">.button-tertiary</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-dark button-outline block">.button-dark</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>a.button-clear</h3>
|
|
<p>
|
|
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
|
|
<a class="button button-primary button-clear">.button-primary</a>
|
|
<a class="button button-secondary button-clear">.button-secondary</a>
|
|
<a class="button button-tertiary button-clear">.button-tertiary</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-dark button-clear">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h3>button.button-clear</h3>
|
|
<p>
|
|
<button class="button button-clear"><i class="icon ion-home"></i> Default</button>
|
|
<button class="button button-primary button-clear">.button-primary</button>
|
|
<button class="button button-secondary button-clear">.button-secondary</button>
|
|
<button class="button button-tertiary button-clear">.button-tertiary</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-dark button-clear">.button-dark</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary button-clear block">.button-primary</a>
|
|
<a class="button button-secondary button-clear block">.button-secondary</a>
|
|
<a class="button button-tertiary button-clear block">.button-tertiary</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-dark button-clear block">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary button-clear block">.button-primary</button>
|
|
<button class="button button-secondary button-clear block">.button-secondary</button>
|
|
<button class="button button-tertiary button-clear block">.button-tertiary</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-dark button-clear block">.button-dark</button>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<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-primary">.button-primary</a>
|
|
<a class="button block button-secondary">.button-secondary</a>
|
|
<a class="button block button-tertiary">.button-tertiary</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-dark">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary">.button-primary</a>
|
|
<a class="button button-secondary">.button-secondary</a>
|
|
<a class="button button-tertiary">.button-tertiary</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-dark">.button-dark</a>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<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-primary">.button-primary</button>
|
|
<button class="button button-full button-secondary">.button-secondary</button>
|
|
<button class="button button-full button-tertiary">.button-tertiary</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-dark">.button-dark</button>
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<p>
|
|
<a class="button button-secondary" href="index.html">Homepage</a>
|
|
</p>
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|