mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
938864e8d0
BREAKING CHANGES: - `<button>` becomes `<button ion-button>` - `<a button>` becomes `<a ion-button>` - `<button ion-item>` does not get the `ion-button` attribute - Buttons inside of `<ion-item-options>` do get the `ion-button` attribute - Removed the `category` attribute, this should be passed in `ion-button` instead. - Button attributes added for icons in buttons: `icon-only`, `icon-left`, and `icon-right` closes #7466
133 lines
3.4 KiB
HTML
133 lines
3.4 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>{{demo}}</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Default Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only danger>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button ion-button icon-only secondary>
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-only dark>
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Colored Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only solid>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Solid</ion-title>
|
|
<ion-buttons end>
|
|
<button ion-button icon-right solid secondary>
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only outline>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-right outline secondary>
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Outline</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<button ion-button icon-only menuToggle>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
<ion-title>Left Menu</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-title>Right Menu</ion-title>
|
|
<button ion-button menuToggle right>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
|
|
<ion-buttons end>
|
|
<button ion-button icon-only #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 no-border-top *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 no-border-top *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top primary *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
</ion-content>
|