mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
create test folder
This commit is contained in:
Adam Bradley
@@ -1,43 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Alerts</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Alerts</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<p class="alert">
|
||||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||||
</p>
|
||||
|
||||
<p class="alert alert-error">
|
||||
<strong>Error!</strong> Shit hit the fan.
|
||||
</p>
|
||||
|
||||
<p class="alert alert-success">
|
||||
<strong>Booya!</strong> You win.
|
||||
</p>
|
||||
|
||||
<p class="alert alert-info">
|
||||
<strong>Info yo!</strong> This is what you need to know.
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Button Group</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Button Group</h1>
|
||||
</header>
|
||||
|
||||
<main class="content-padded has-header">
|
||||
<p>
|
||||
<div class="button-group">
|
||||
<a class="button button-primary">Success</a>
|
||||
<a class="button button-primary">Warning</a>
|
||||
<a class="button button-primary">Danger</a>
|
||||
<a class="button button-primary">Dark</a>
|
||||
</div>
|
||||
</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<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="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
<script src="/vendor/angular/angular.js"></script>
|
||||
<script src="/vendor/angular/angular-route.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body ng-app="peopleApp">
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Buttons</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p>
|
||||
<a class="button button-default">Default</a>
|
||||
<a class="button button-secondary">Secondary</a>
|
||||
<a class="button button-primary">Primary</a>
|
||||
<a class="button button-info">Info</a>
|
||||
<a class="button button-success">Success</a>
|
||||
<a class="button button-warning">Warning</a>
|
||||
<a class="button button-danger">Danger</a>
|
||||
<a class="button button-dark">Dark</a>
|
||||
</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Footers</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Footers</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header has-footer">
|
||||
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
|
||||
<p>Content element must have "has-footer" as a classname.</p>
|
||||
<ul>
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
<li>asdf
|
||||
</ul>
|
||||
<p>Bottom of the list
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title"> Me footer </h3>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Forms</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Forms</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<h2>Default form layout</h2>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>Label name</label>
|
||||
<input type="text" placeholder="Type something…">
|
||||
<span class="help-block">Example block-level help text here.</span>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Inline form layout</h2>
|
||||
<form class="form-inline">
|
||||
<input type="text" class="input-small" placeholder="Email">
|
||||
<input type="password" class="input-small" placeholder="Password">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Horizontal form layout</h2>
|
||||
<form class="form-horizontal">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputEmail">Email</label>
|
||||
<div class="controls">
|
||||
<input type="text" id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="inputPassword">Password</label>
|
||||
<div class="controls">
|
||||
<input type="password" id="inputPassword" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Grids</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Grids</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Header</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<style>
|
||||
.bar {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<a class="button">Back</a>
|
||||
<h1 class="title">Really really really really really really really really long title!</h1>
|
||||
<a class="button">This</a>
|
||||
</header>
|
||||
<div class="bar bar-header-secondary bar-success">
|
||||
<div class="button-bar">
|
||||
<a class="button">Success</a>
|
||||
<a class="button">Warning</a>
|
||||
<a class="button">Danger</a>
|
||||
</div>
|
||||
</div>
|
||||
<header class="bar bar-header bar-default">
|
||||
<a class="button">Back</a>
|
||||
<div class="button-bar">
|
||||
<a class="button">Success</a>
|
||||
<a class="button">Warning</a>
|
||||
<a class="button">Danger</a>
|
||||
</div>
|
||||
<a class="button">This</a>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p>Content element must have "has-header" as a classname.</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Image Swipe</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Image Swipe</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header">
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
<script src="/vendor/angular/angular.js"></script>
|
||||
<script src="/vendor/angular/angular-route.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Ionic</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p><a class="button button-block button-default" href="alerts.html">Alerts</a></p>
|
||||
<p><a class="button button-block button-default" href="buttons.html">Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="button-groups.html">Button Groups</a></p>
|
||||
<p><a class="button button-block button-default" href="events.html">Events</a></p>
|
||||
<p><a class="button button-block button-default" href="footers.html">Footers</a></p>
|
||||
<p><a class="button button-block button-default" href="forms.html">Forms</a></p>
|
||||
<p><a class="button button-block button-default" href="grids.html">Grids</a></p>
|
||||
<p><a class="button button-block button-default" href="headers.html">Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="image-swipe.html">Image Swipe</a></p>
|
||||
<p><a class="button button-block button-default" href="input-slider.html">Input: Slider</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html">Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html">Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html">Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html">Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html">Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="panels.html">Panels</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html">Popovers</a></p>
|
||||
<p><a class="button button-block button-default" href="pull-to-refresh.html">Pull To Refresh</a></p>
|
||||
<p><a class="button button-block button-default" href="tab-bars.html">Tab Bars</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Input: Slider</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Slider</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,201 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Text Inputs</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="view">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Text Inputs</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<div class="content has-header has-footer">
|
||||
|
||||
<h3>Default Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="First Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Last Name">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Default Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Username">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Filter by name">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Name">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Username</span>
|
||||
<input class="col-xs-8" type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="email" placeholder="your@email.com">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">First Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Sir Derp">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">First Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="John">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Last Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Suhr">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Filter By Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Enter keywords">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Drifty">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Co">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Input, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,198 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Text Area</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="view">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Text Area</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<div class="content has-header has-footer">
|
||||
|
||||
<h3>Default Text Area, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="First Name"></textarea>
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Last Name"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Area, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="First Name"></textarea>
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Last Name"></textarea>
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Email"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Default Text Area, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Username"></textarea>
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Email"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper">
|
||||
<textarea placeholder="Filter by name"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Default Text Area, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper">
|
||||
<input type="email" placeholder="Email">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<input type="text" placeholder="Name">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Inline Label On Top Of Text Area, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Username</span>
|
||||
<input class="col-xs-8" type="text" placeholder="@drifty">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="email" placeholder="your@email.com">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">First Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Sir Derp">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Area, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Inline Label On Top Of Text Area, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">First Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="John">
|
||||
</label>
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Last Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Suhr">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Inline Label On Top Of Text Area, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Email</span>
|
||||
<input class="col-xs-8" type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group inset">
|
||||
<label class="input-wrapper row">
|
||||
<span class="input-label col-xs-4">Filter By Name</span>
|
||||
<input class="col-xs-8" type="text" placeholder="Enter keywords">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Not Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">First Name</span>
|
||||
<input type="text" placeholder="Drifty">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Last Name</span>
|
||||
<input type="text" placeholder="Co">
|
||||
</label>
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Filter By Name</span>
|
||||
<input type="text" placeholder="">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Is Inset, No Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content-padded">
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Not Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3>Stacked Label On Top Of Text Area, Is Inset, With Content Padding</h3>
|
||||
<div class="input-group stacked-label inset">
|
||||
<label class="input-wrapper">
|
||||
<span class="input-label">Email</span>
|
||||
<input type="text" placeholder="your@email.com">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,28 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Input: Toggle</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body ng-app="peopleApp">
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Toggle</h1>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,87 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lists</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<link rel="stylesheet" href="app.css">
|
||||
|
||||
<script src="/vendor/angular/angular.js"></script>
|
||||
<script src="/vendor/angular/angular-route.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header">
|
||||
<ul class="list">
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<li class="list-divider">Other things</li>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,304 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Panels</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="page" class="full-section menu-animated">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<div class="buttons">
|
||||
<a id="left-button" class="button button-dark" href="#">
|
||||
<i class="icon-reorder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title">Chats</h1>
|
||||
<div class="buttons">
|
||||
<button id="right-button" class="button button-dark">
|
||||
<i class="icon-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title"></h3>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section id="my-left-panel" class="menu menu-left">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="my-right-panel" class="menu menu-right">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="../../js/ionic-events.js"></script>
|
||||
<script src="../../js/ionic-gestures.js"></script>
|
||||
<script src="../../js/controllers/ionic-leftrightmenu.js"></script>
|
||||
<script>
|
||||
|
||||
// Grab the sections
|
||||
var page = document.getElementById('page');
|
||||
var leftPanel = document.getElementById('my-left-panel');
|
||||
var rightPanel = document.getElementById('my-right-panel');
|
||||
var controller = new ion.controllers.LeftRightMenuViewController({
|
||||
left: leftPanel,
|
||||
leftWidth: 270,
|
||||
right: rightPanel,
|
||||
rightWidth: 270,
|
||||
center: page,
|
||||
animateClass: 'menu-animated'
|
||||
});
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleLeft();
|
||||
}, document.getElementById('left-button'));
|
||||
window.ion.onGesture('tap', function(e) {
|
||||
controller.toggleRight();
|
||||
}, document.getElementById('right-button'));
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,258 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Panels</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section data-default-panel="my-left-panel">
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
|
||||
<i class="icon-reorder"></i>
|
||||
</button>
|
||||
<h1 class="title">Panels</h1>
|
||||
<button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
|
||||
<i class="icon-cog"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<p><button class="button button-primary" data-panel-toggle="my-other-left-panel">Other Left Side Panel</button></p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title">Panels</h3>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<section id="my-left-panel" class="menu menu-left">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Left Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="my-right-panel" class="menu menu-right">
|
||||
<ul class="list">
|
||||
<li class="list-divider">Right Nav Things</li>
|
||||
<a href="#" class="list-item">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="my-other-left-panel" class="menu menu-left">
|
||||
This is my other left side panel!
|
||||
</section>
|
||||
|
||||
|
||||
<script src="../../js/ionic-panel.js"></script>
|
||||
<script src="../../connectors/default/panel-handler.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Modals</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Modals</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header">
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Panels</title>
|
||||
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section id="page" class="full-section menu-animated">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<div class="buttons">
|
||||
<a id="left-button" class="button button-dark" href="#">
|
||||
<i class="icon-reorder"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="title">Chats</h1>
|
||||
<div class="buttons">
|
||||
<button id="right-button" class="button button-dark">
|
||||
<i class="icon-cog"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content content-padded has-header">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Panel title</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
Is this
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title"></h3>
|
||||
</footer>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,27 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Popovers</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Popovers</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header">
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pull To Refresh</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Pull To Refresh</h1>
|
||||
</header>
|
||||
|
||||
<main class="ptr-capable has-header">
|
||||
<p>Pull the content down to refresh.</p>
|
||||
</main>
|
||||
|
||||
<section class="ptr-content has-header">
|
||||
<div class="pulling">KEEP GOING</div>
|
||||
<div class="refreshing">REFRESHING!</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,149 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tab Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../dist/ionic.css">
|
||||
<style>
|
||||
.tabs {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Tab Bars</h1>
|
||||
</header>
|
||||
|
||||
<main class="has-header">
|
||||
|
||||
</main>
|
||||
<nav id="tab-bar" class="tabs tabs-default">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<nav id="tab-bar" class="tabs tabs-secondary">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<nav id="tab-bar" class="tabs tabs-primary">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<nav id="tab-bar" class="tabs tabs-success">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<nav id="tab-bar" class="tabs tabs-info">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
<nav id="tab-bar" class="tabs tabs-warning">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<nav id="tab-bar" class="tabs tabs-danger">
|
||||
<a class="tab-item" href="#">
|
||||
<i class="icon-home"></i>
|
||||
Friends
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Enemies
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
Settings
|
||||
</a>
|
||||
<a class="tab-item">
|
||||
More
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../../js/ionic-events.js"></script>
|
||||
<script src="../../js/ionic-gestures.js"></script>
|
||||
<script src="../../js/controllers/ionic-tabcontroller.js"></script>
|
||||
<script>
|
||||
|
||||
// Grab the sections
|
||||
var tab = document.getElementById('tab-bar');
|
||||
var controller = new ion.controllers.TabController({
|
||||
tab: tab
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user