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

docs(demos/toolbar): api demo

Browse Source
This commit is contained in:
Drew Rygh
2015-12-11 14:33:44 -06:00
parent 4354c3b1ae
commit 41105baf22
3 changed files with 170 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/toolbar/app.html Normal file
View File

@ -0,0 +1,2 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<ion-overlay></ion-overlay>

20
demos/toolbar/index.ts Normal file
View File

@ -0,0 +1,20 @@
import {App, Page, IonicApp} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}

148
demos/toolbar/main.html Normal file
View File

@ -0,0 +1,148 @@
<ion-navbar *navbar>
<ion-title>Switch</ion-title>
</ion-navbar>
<ion-content>
<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 start>
<button>
<icon ios=contact></icon>
</button>
<button>
<icon search></icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<icon more></icon>
</button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
<icon contact></icon>
</button>
<button solid>
<icon contact></icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button solid secondary>
Help
<icon help-circle></icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
<icon contact></icon>
</button>
<button outline>
<icon star></icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline>
<icon contact></icon>
</button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<icon contact></icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<icon create></icon>
</button>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menu-toggle>
<icon menu></icon>
</button>
<ion-buttons start>
<button>
<icon star></icon>
</button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<icon star></icon>
</button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<button menu-toggle right>
<icon menu></icon>
</button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button2 (click)="buttonClick(button2)">
<icon search></icon>
</button>
</ion-buttons>
<ion-segment secondary>
<ion-segment-button>
Something
</ion-segment-button>
<ion-segment-button>
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button>
Light
</ion-segment-button>
<ion-segment-button>
Toolbar
</ion-segment-button>
<ion-segment-button>
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
background: #eee !important;
}
</style>
<ion-content>