mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
78c2ecc84f
Hiding any toolbars that don’t use ion-title for the title demo only references driftyco/ionic-site#397
135 lines
2.9 KiB
HTML
135 lines
2.9 KiB
HTML
<ion-toolbar>
|
|
<ion-title>{{demo}}</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content>
|
|
|
|
<ion-toolbar>
|
|
<ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-toolbar>
|
|
<ion-buttons start>
|
|
<button>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button>
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button>
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Default Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-toolbar>
|
|
<ion-buttons start>
|
|
<button danger>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button secondary>
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button dark>
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Colored Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-toolbar>
|
|
<ion-buttons start>
|
|
<button solid>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Solid</ion-title>
|
|
<ion-buttons end>
|
|
<button solid secondary>
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-toolbar>
|
|
<ion-buttons start>
|
|
<button outline>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button outline secondary>
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Outline</ion-title>
|
|
</ion-toolbar>
|
|
|
|
|
|
|
|
<ion-toolbar>
|
|
<button menuToggle>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
<ion-title>Left Menu</ion-title>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-toolbar>
|
|
<ion-title>Right Menu</ion-title>
|
|
<button menuToggle right>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar *ngIf="demo != 'Title'">
|
|
<ion-buttons end>
|
|
<button #button2 (click)="buttonClick(button2)">
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-segment danger [(ngModel)]="favorites">
|
|
<ion-segment-button value="featured">
|
|
Featured
|
|
</ion-segment-button>
|
|
<ion-segment-button value="recent">
|
|
Recent
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar *ngIf="demo != 'Title'">
|
|
<ion-segment [(ngModel)]="apps">
|
|
<ion-segment-button value="paid">
|
|
Paid
|
|
</ion-segment-button>
|
|
<ion-segment-button value="free">
|
|
Free
|
|
</ion-segment-button>
|
|
<ion-segment-button value="top">
|
|
Top
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar primary *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
</ion-content>
|