mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
135 lines
7.0 KiB
HTML
135 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<title>Ionic - The Most powerful cross-platform mobile app framework.</title>
|
|
<link href="bootstrap3.css" rel="stylesheet">
|
|
<link href="pygments.css" rel="stylesheet">
|
|
<link href="docs.css" rel="stylesheet">
|
|
|
|
<link href="/dist/ionic.css" rel="stylesheet">
|
|
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Static navbar -->
|
|
<div class="navbar navbar-default">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Ionic Framework</a>
|
|
</div>
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Start</a></li>
|
|
<li><a href="components.html">Components</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Formulas <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Multi-page navigation</a></li>
|
|
<li><a href="#">Left/Right Menu</a></li>
|
|
<li><a href="#">Tab Bar</a></li>
|
|
<li><a href="#">Pull-to-refresh</a></li>
|
|
<li><a href="#">Slide up menu</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-2" id="sidebar" role="navigation">
|
|
<div class="sidebar-nav">
|
|
<ul class="list-group">
|
|
<a class="list-group-item" href="#buttons">Buttons</a></li>
|
|
<a class="list-group-item" href="#button-groups">Button-group</a></li>
|
|
<a class="list-group-item" href="#bars">Header/Footer Bar</a></li>
|
|
<a class="list-group-item" href="#tab-bars">Tab Bar</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6">
|
|
<div class="page-header">
|
|
<h1 id="buttons">Buttons</h1>
|
|
</div>
|
|
<p>
|
|
Buttons are the core of any great mobile app. With Ionic, we support a set of
|
|
styled buttons in the spirit of Bootstrap.
|
|
</p>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><h3 class="panel-title">Styles</h3></div>
|
|
<div class="panel-body">
|
|
<!-- Standard white/grey button -->
|
|
<button type="button" class="button button-default">Default</button>
|
|
|
|
<!-- A secondary dark grey button -->
|
|
<button type="button" class="button button-secondary">Secondary</button>
|
|
|
|
<!-- A dark button -->
|
|
<button type="button" class="button button-dark">Dark</button>
|
|
|
|
<!-- A blue button that can be used in lots of places -->
|
|
<button type="button" class="button button-primary">Primary</button>
|
|
|
|
<!-- A green button -->
|
|
<button type="button" class="button button-success">Success</button>
|
|
|
|
<!-- A cyan button -->
|
|
<button type="button" class="button button-info">Info</button>
|
|
|
|
<!-- An orange button, often used for warning messages -->
|
|
<button type="button" class="button button-warning">Warning</button>
|
|
|
|
<!-- Used for serious actions that have serious side effects -->
|
|
<button type="button" class="button button-danger">Danger</button>
|
|
</div>
|
|
</div>
|
|
<div class="highlight">
|
|
<pre>
|
|
<span class="c"><!-- Standard white/grey button --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-default"</span><span class="nt">></span>Default<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- A secondary dark grey button --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-secondary"</span><span class="nt">></span>Secondary<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- A dark button --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-dark"</span><span class="nt">></span>Dark<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- A blue button that can be used in lots of places --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-primary"</span><span class="nt">></span>Primary<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- A green button --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-success"</span><span class="nt">></span>Success<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- A cyan button --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-info"</span><span class="nt">></span>Info<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- An orange button, often used for warning messages --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-warning"</span><span class="nt">></span>Warning<span class="nt"></button></span>
|
|
|
|
<span class="c"><!-- Used for serious actions that have serious side effects --></span>
|
|
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"button button-danger"</span><span class="nt">></span>Danger<span class="nt"></button></span>
|
|
</pre>
|
|
</div>
|
|
<h3 id="buttons-icons">Icon-only Buttons</h3>
|
|
<p>
|
|
To show a button without padding, a background, or border, add <code>.button-clear</code>. Perfect for icon-only buttons in small spaces.
|
|
</p>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4">
|
|
<div id="phone">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|