javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): moved themes into ionic and created components folder.

Browse Source
This commit is contained in:
Josh Thomas
2017-06-21 10:14:08 -05:00
parent bd5b67304d
commit d0844c585d
213 changed files with 6387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/ionic/demos/button/basic.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic-web/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<ion-button button-type="bar-button">Test button</ion-button>
<ion-button button-type="test-button">Test button</ion-button>
<ion-button button-type="test-button" class="my-test-button">Test button w/ class</ion-button>
<ion-button button-type="alert-radio-button">
Alert button
</ion-button>
<ion-button button-type="alert-radio-button" class="alert-tappable alert-radio" role="radio">
Alert button w/ class & role
</ion-button>
<ion-button href="#">Anchor Button</ion-button>
<a href="#">Anchor Link</a>
<h4>Colors</h4>
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<h4>Shapes</h4>
<ion-button full>Full Button</ion-button>
<ion-button block>Block Button</ion-button>
<ion-button round>Round Button</ion-button>
<h4>Outlines</h4>
<ion-button full outline>Outline + Full + No Color</ion-button>
<ion-button color="secondary" full outline>Outline + Full</ion-button>
<ion-button color="secondary" block outline>Outline + Block</ion-button>
<ion-button color="secondary" round outline>Outline + Round</ion-button>
<h4>Clear</h4>
<ion-button full clear>Clear + Full + No Color</ion-button>
<ion-button color="danger" full clear>Clear + Full</ion-button>
<ion-button color="danger" block clear>Clear + Block</ion-button>
<ion-button color="danger" round clear>Clear + Round</ion-button>
<h4>Icons</h4>
<ion-button color="dark">
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button color="dark">
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button color="dark">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<h4>Sizes</h4>
<ion-button color="light" large>Large</ion-button>
<ion-button color="light">Default</ion-button>
<ion-button color="light" small>Small</ion-button>
<h4>States</h4>
<ion-button disabled>Large</ion-button>
<ion-button color="secondary" disabled clear>Large</ion-button>
</ion-content>
</ion-app>
</body>
</html>

248
packages/ionic/demos/button/toolbar.html Normal file
View File

@ -0,0 +1,248 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic-web/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<ion-toolbar no-padding>
<ion-title>This should have no padding</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="mode-start">
<ion-button class="closeButton" clear>
Close
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button solid class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon name="contact" slot="start"></ion-icon>
Solid
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="mode-end">
<ion-button solid color="secondary" class="activated">
Help
<ion-icon name="help-circle" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon name="star" slot="start"></ion-icon>
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button color="secondary" outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
<ion-icon name="create" slot="end"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-start">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="mode-end">
<ion-button href="#">
Edit
</ion-button>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-button menuToggle slot="start">
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons slot="mode-start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button1 (click)="buttonClick(button1)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-button menuToggle slot="end">
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="mode-end">
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>