javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(icon): update icon-only tests

Browse Source
This commit is contained in:
Adam Bradley
2017-06-16 14:22:12 -05:00
parent cf27c0b367
commit 62cd0f6dac
28 changed files with 217 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demos/src/button/pages/page-one/page-one.html
View File

@@ -49,8 +49,8 @@
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button icon-only color="dark">
<ion-icon name="star"></ion-icon>
<ion-button color="dark">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<h4>Sizes</h4>

4
demos/src/item/pages/page-one/page-one.html
View File

@@ -12,8 +12,8 @@
<ion-list>
<ion-list-header>
Settings
<ion-button icon-only item-end clear>
<ion-icon name="cog"></ion-icon>
<ion-button item-end clear>
<ion-icon slot="icon-only" name="cog"></ion-icon>
</ion-button>
</ion-list-header>

40
demos/src/navbar/pages/page-one/page-one.html
View File

@@ -15,16 +15,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="more"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only color="danger">
<ion-icon name="contact"></ion-icon>
<ion-button color="danger">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only color="secondary">
<ion-icon name="search"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="dark">
<ion-icon name="more"></ion-icon>
<ion-button color="dark">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Colored Buttons</ion-title>
@@ -49,8 +49,8 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only solid>
<ion-icon name="contact"></ion-icon>
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
@@ -64,8 +64,8 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<button ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
<button ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
@@ -78,8 +78,8 @@
</ion-toolbar>
<ion-toolbar no-border-top>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
<button ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
@@ -93,8 +93,8 @@
<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-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="danger" [(ngModel)]="favorites">

4
demos/src/popover/pages/page-one/page-one.html
View File

@@ -3,8 +3,8 @@
<ion-navbar color="primary">
<ion-title>Popover</ion-title>
<ion-buttons end>
<ion-button icon-only (click)="presentRadioPopover($event)">
<ion-icon name="more"></ion-icon>
<ion-button (click)="presentRadioPopover($event)">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-navbar>

40
demos/src/title/pages/page-one/page-one.html
View File

@@ -15,16 +15,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="more"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only color="danger">
<ion-icon name="contact"></ion-icon>
<ion-button color="danger">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only color="secondary">
<ion-icon name="search"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="dark">
<ion-icon name="more"></ion-icon>
<ion-button color="dark">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Colored Buttons</ion-title>
@@ -49,8 +49,8 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only solid>
<ion-icon name="contact"></ion-icon>
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
@@ -64,8 +64,8 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
@@ -78,8 +78,8 @@
</ion-toolbar>
<ion-toolbar no-border-top>
<ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
@@ -93,8 +93,8 @@
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
<ion-buttons end>
<ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="danger" [(ngModel)]="favorites">

38
demos/src/toolbar/pages/page-one/page-one.html
View File

@@ -15,16 +15,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="more"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@@ -32,16 +32,16 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only color="danger">
<ion-icon name="contact"></ion-icon>
<ion-button color="danger">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only color="secondary">
<ion-icon name="search"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="dark">
<ion-icon name="more"></ion-icon>
<ion-button color="dark">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Colored Buttons</ion-title>
@@ -49,7 +49,7 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only solid>
<ion-button solid>
<ion-icon name="contact"></ion-icon>
</ion-button>
</ion-buttons>
@@ -64,8 +64,8 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
@@ -78,8 +78,8 @@
</ion-toolbar>
<ion-toolbar no-border-top>
<ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-button menuToggle>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
<ion-title>Left Menu</ion-title>
</ion-toolbar>
@@ -93,8 +93,8 @@
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
<ion-buttons end>
<ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="danger" [(ngModel)]="favorites">

8
src/components/app/test/cordova/pages/modal/modal-page.ts
View File

@@ -10,13 +10,13 @@ import { IonicPage, ViewController } from '../../../../../..';
<ion-toolbar>
<ion-title>This is a modal</ion-title>
<ion-buttons left>
<ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
<ion-icon name="close"></ion-icon>
<ion-button (click)="dismissModal()" class="e2eCordovaCloseModal">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="funnel"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="funnel"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>

4
src/components/app/test/cordova/pages/page-one/page-one.html
View File

@@ -9,8 +9,8 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-button menuToggle="right" right>

4
src/components/app/test/cordova/pages/page-two/page-two.html
View File

@@ -6,8 +6,8 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="funnel"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="funnel"></ion-icon>
</ion-button>
</ion-buttons>
<ion-button menuToggle="right" right>

4
src/components/card/test/map/main.html
View File

@@ -12,8 +12,8 @@
<ion-card>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<ion-button icon-only fab fab-right fab-top>
<ion-icon name="pin"></ion-icon>
<ion-button fab fab-right fab-top>
<ion-icon slot="icon-only" name="pin"></ion-icon>
</ion-button>
<ion-item>

4
src/components/input/test/fixed-inline-labels/pages/root-page/root-page.html
View File

@@ -30,8 +30,8 @@
<ion-item>
<ion-label fixed>From</ion-label>
<ion-input value="Text 3"></ion-input>
<ion-button icon-only clear item-end>
<ion-icon name="power"></ion-icon>
<ion-button clear item-end>
<ion-icon slot="icon-only" name="power"></ion-icon>
</ion-button>
</ion-item>

4
src/components/input/test/floating-labels/pages/root-page/root-page.html
View File

@@ -14,8 +14,8 @@
<ion-item>
<ion-label floating>Params: {{ myParam }}</ion-label>
<ion-input [(ngModel)]="myParam" type="text"></ion-input>
<ion-button icon-only clear item-end>
<ion-icon name="settings"></ion-icon>
<ion-button clear item-end>
<ion-icon slot="icon-only" name="settings"></ion-icon>
</ion-button>
</ion-item>

4
src/components/input/test/inline-labels/pages/root-page/root-page.html
View File

@@ -26,8 +26,8 @@
<ion-item>
<ion-label>From:</ion-label>
<ion-input value="Text 3"></ion-input>
<ion-button icon-only clear item-end>
<ion-icon name="power"></ion-icon>
<ion-button clear item-end>
<ion-icon slot="icon-only" name="power"></ion-icon>
</ion-button>
</ion-item>

8
src/components/input/test/stacked-labels/pages/root-page/root-page.html
View File

@@ -20,8 +20,12 @@
<ion-item>
<ion-label stacked>Label 2</ion-label>
<ion-input value="Text 2"></ion-input>
<ion-button icon-only item-end clear><ion-icon name="heart-outline"></ion-icon></ion-button>
<ion-button icon-only item-end clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></ion-button>
<ion-button item-end clear>
<ion-icon slot="icon-only" name="heart-outline"></ion-icon>
</ion-button>
<ion-button item-end clear>
<ion-icon slot="icon-only" ios="ios-call-outline" md="md-call"></ion-icon>
</ion-button>
</ion-item>
<ion-item>

16
src/components/item/test/buttons/pages/root-page/root-page.html
View File

@@ -64,12 +64,12 @@
</ion-item>
<ion-item>
<ion-button icon-only clear item-start default (click)="testClick($event)">
<ion-icon name="navigate"></ion-icon>
<ion-button clear item-start default (click)="testClick($event)">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
</ion-button>
icon only buttons default
<ion-button icon-only clear item-end default (click)="testClick($event)">
<ion-icon name="navigate"></ion-icon>
<ion-button clear item-end default (click)="testClick($event)">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
</ion-button>
</ion-item>
@@ -113,11 +113,11 @@
<ion-item (click)="testClickOutsize($event)">
<div>
<ion-button icon-only clear item-end (click)="testClick($event)">
<ion-icon name="remove-circle"></ion-icon>
<ion-button clear item-end (click)="testClick($event)">
<ion-icon slot="icon-only" name="remove-circle"></ion-icon>
</ion-button>
<ion-button icon-only clear item-end (click)="testClick($event)">
<ion-icon name="add-circle"></ion-icon>
<ion-button clear item-end (click)="testClick($event)">
<ion-icon slot="icon-only" name="add-circle"></ion-icon>
</ion-button>
</div>
</ion-item>

12
src/components/item/test/sliding/pages/root-page/root-page.html
View File

@@ -48,8 +48,8 @@
Two options, one dynamic option and text
</ion-item>
<ion-item-options side="left">
<ion-button icon-only color="primary">
<ion-icon name="more"></ion-icon>
<ion-button color="primary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-item-options>
<ion-item-options side="right" *ngIf="showOptions">
@@ -80,11 +80,11 @@
</ion-button>
</ion-item-options>
<ion-item-options side="right">
<ion-button icon-only color="danger" (click)="unread(item100)">
<ion-icon name="trash"></ion-icon>
<ion-button color="danger" (click)="unread(item100)">
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-button>
<ion-button icon-only (click)="unread(item100)">
<ion-icon name="star"></ion-icon>
<ion-button (click)="unread(item100)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-item-options>

8
src/components/list/test/header-scenarios/pages/main/main.html
View File

@@ -54,12 +54,12 @@
</ion-list-header>
<ion-list-header>
<ion-button icon-only clear item-start default (click)="testClick($event)">
<ion-icon name="navigate"></ion-icon>
<ion-button clear item-start default (click)="testClick($event)">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
</ion-button>
icon only buttons default
<ion-button icon-only clear item-end default (click)="testClick($event)">
<ion-icon name="navigate"></ion-icon>
<ion-button clear item-end default (click)="testClick($event)">
<ion-icon slot="icon-only" name="navigate"></ion-icon>
</ion-button>
</ion-list-header>

8
src/components/menu/test/basic/pages/page-two/page-two.html
View File

@@ -11,14 +11,14 @@
</ion-title>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="football"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="football"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="baseball"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="baseball"></ion-icon>
</ion-button>
</ion-buttons>

4
src/components/nav/test/basic/pages/first-page/first-page.html
View File

@@ -2,7 +2,9 @@
<ion-navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons start>
<ion-button icon-only><ion-icon name="star"></ion-icon></ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button>S1g</ion-button>

4
src/components/popover/popover-controller.ts
View File

@@ -49,8 +49,8 @@ import { DeepLinker } from '../../navigation/deep-linker';
* which creates and presents the popover:
*
* ```html
* <ion-button icon-only (click)="presentPopover($event)">
* <ion-icon name="more"></ion-icon>
* <ion-button (click)="presentPopover($event)">
* <ion-icon slot="icon-only" name="more"></ion-icon>
* </ion-button>
* ```
*

24
src/components/popover/test/basic/pages/page-one/page-one.html
View File

@@ -2,20 +2,20 @@
<ion-navbar color="primary">
<ion-buttons left>
<ion-button icon-only (click)="presentRadioPopover($event)">
<ion-icon name="person"></ion-icon>
<ion-button (click)="presentRadioPopover($event)">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
<ion-button icon-only (click)="presentLongListPopover($event)">
<ion-icon name="search"></ion-icon>
<ion-button (click)="presentLongListPopover($event)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Popover</ion-title>
<ion-buttons end>
<ion-button icon-only (click)="presentListPopover($event)">
<ion-icon name="options"></ion-icon>
<ion-button (click)="presentListPopover($event)">
<ion-icon slot="icon-only" name="options"></ion-icon>
</ion-button>
<ion-button icon-only (click)="presentRadioPopover($event)">
<ion-icon name="more"></ion-icon>
<ion-button (click)="presentRadioPopover($event)">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-navbar>
@@ -75,11 +75,11 @@
<ion-toolbar>
<ion-title>Popover</ion-title>
<ion-buttons start>
<ion-button icon-only (click)="presentListPopover($event)">
<ion-icon name="more"></ion-icon>
<ion-button (click)="presentListPopover($event)">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
<ion-button icon-only (click)="presentLongListPopover($event)">
<ion-icon name="search"></ion-icon>
<ion-button (click)="presentLongListPopover($event)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>

4
src/components/segment/test/basic/pages/home-page/home-page.html
View File

@@ -11,8 +11,8 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment [(ngModel)]="icons" color="secondary">

8
src/components/toolbar/navbar.ts
View File

@@ -23,8 +23,8 @@ import { ViewController } from '../../navigation/view-controller';
* <ion-header>
*
* <ion-navbar>
* <ion-button icon-only menuToggle>
* <ion-icon name="menu"></ion-icon>
* <ion-button menuToggle>
* <ion-icon slot="icon-only" name="menu"></ion-icon>
* </ion-button>
*
* <ion-title>
@@ -32,8 +32,8 @@ import { ViewController } from '../../navigation/view-controller';
* </ion-title>
*
* <ion-buttons end>
* <ion-button icon-only (click)="openModal()">
* <ion-icon name="options"></ion-icon>
* <ion-button (click)="openModal()">
* <ion-icon slot="icon-only" name="options"></ion-icon>
* </ion-button>
* </ion-buttons>
* </ion-navbar>

16
src/components/toolbar/test/basic/pages/root-page/root-page.html
View File

@@ -5,16 +5,16 @@
<ion-toolbar color="primary">
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary">
<ion-icon name="more"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Subheader</ion-title>
@@ -90,8 +90,8 @@
<ion-footer>
<ion-toolbar>
<ion-buttons end>
<ion-button icon-only #button2>
<ion-icon name="search"></ion-icon>
<ion-button #button2>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar>

72
src/components/toolbar/test/colors/pages/root-page/root-page.html
View File

@@ -9,16 +9,16 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons start>
<ion-button icon-only showWhen="ios">
<ion-icon name="contact"></ion-icon>
<ion-button showWhen="ios">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button color="secondary" icon-only>
<ion-icon name="more"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default</ion-title>
@@ -26,16 +26,16 @@
<ion-toolbar color="primary">
<ion-buttons start>
<ion-button showWhen="ios" icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button showWhen="ios">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button color="secondary" icon-only>
<ion-icon name="more"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary</ion-title>
@@ -43,16 +43,16 @@
<ion-toolbar color="primary">
<ion-buttons start>
<ion-button showWhen="ios" icon-only class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button showWhen="ios" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only class="activated">
<ion-icon name="search"></ion-icon>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button color="secondary" icon-only class="activated">
<ion-icon name="more"></ion-icon>
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Primary.activated</ion-title>
@@ -60,8 +60,8 @@
<ion-toolbar color="secondary">
<ion-buttons start>
<ion-button icon-only color="primary">
<ion-icon name="contact"></ion-icon>
<ion-button color="primary">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon slot="start" name="contact"></ion-icon>
@@ -79,8 +79,8 @@
<ion-toolbar color="secondary">
<ion-buttons start>
<ion-button icon-only color="primary" class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button color="primary" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon slot="start" name="contact"></ion-icon>
@@ -98,8 +98,8 @@
<ion-toolbar color="dark">
<ion-buttons start>
<ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon slot="start" name="star"></ion-icon>
@@ -107,8 +107,8 @@
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary" outline>
<ion-icon name="contact"></ion-icon>
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark</ion-title>
@@ -116,8 +116,8 @@
<ion-toolbar color="dark">
<ion-buttons start>
<ion-button outline icon-only class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon slot="start" name="star"></ion-icon>
@@ -125,8 +125,8 @@
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button color="secondary" outline icon-only class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button color="secondary" outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Dark.activated</ion-title>
@@ -153,8 +153,8 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="star"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Danger</ion-title>
@@ -181,8 +181,8 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="star"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Light</ion-title>
@@ -190,8 +190,8 @@
<ion-toolbar transparent>
<ion-buttons end>
<ion-button #button1 icon-only (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
<ion-button #button1 (click)="buttonClick(button1)">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Transparent</ion-title>

72
src/components/toolbar/test/scenarios/pages/root-page/root-page.html
View File

@@ -10,16 +10,16 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary">
<ion-icon name="more"></ion-icon>
<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>
@@ -27,16 +27,16 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="contact"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only>
<ion-icon name="search"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary">
<ion-icon name="more"></ion-icon>
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Defaults</ion-title>
@@ -44,16 +44,16 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button icon-only class="activated">
<ion-icon name="search"></ion-icon>
<ion-button class="activated">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary" class="activated">
<ion-icon name="more"></ion-icon>
<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>
@@ -61,8 +61,8 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only solid>
<ion-icon name="contact"></ion-icon>
<ion-button solid>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid>
<ion-icon slot="start" name="contact"></ion-icon>
@@ -80,8 +80,8 @@
<ion-toolbar>
<ion-buttons start>
<ion-button href="#" icon-only solid class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button href="#" solid class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button solid class="activated">
<ion-icon slot="start" name="contact"></ion-icon>
@@ -99,8 +99,8 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only outline>
<ion-icon name="contact"></ion-icon>
<ion-button outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline>
<ion-icon slot="start" name="star"></ion-icon>
@@ -108,8 +108,8 @@
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary" outline>
<ion-icon name="contact"></ion-icon>
<ion-button color="secondary" outline>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Outline</ion-title>
@@ -117,8 +117,8 @@
<ion-toolbar>
<ion-buttons start>
<ion-button icon-only outline class="activated">
<ion-icon name="contact"></ion-icon>
<ion-button outline class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button outline class="activated">
<ion-icon slot="start" name="star"></ion-icon>
@@ -126,8 +126,8 @@
</ion-button>
</ion-buttons>
<ion-buttons end>
<ion-button icon-only color="secondary" outline class="activated">
<ion-icon name="contact"></ion-icon>
<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>
@@ -168,8 +168,8 @@
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons start>
<ion-button icon-only>
<ion-icon name="star"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
@@ -177,8 +177,8 @@
<ion-toolbar>
<ion-buttons end>
<ion-button icon-only #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
<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>
@@ -189,8 +189,8 @@
<ion-toolbar>
<ion-buttons end>
<ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
<ion-button #button2 (click)="buttonClick(button2)">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">

6
src/components/virtual-scroll/test/basic/main.html
View File

@@ -1,13 +1,13 @@
<ion-header>
<ion-navbar>
<ion-buttons end>
<ion-button icon-only (click)="changeItem()">
<ion-button (click)="changeItem()">
Change random
</ion-button>
<ion-button icon-only (click)="addRandomItem()">
<ion-button (click)="addRandomItem()">
Add random
</ion-button>
<ion-button icon-only (click)="addItem()">
<ion-button (click)="addItem()">
Append
</ion-button>
</ion-buttons>

4
src/components/virtual-scroll/test/infinite-scroll/main.html
View File

@@ -3,8 +3,8 @@
<ion-title>Virtual Scroll</ion-title>
<ion-buttons end>
<ion-button icon-only (click)="addItem()">
<ion-icon name="add"></ion-icon>
<ion-button (click)="addItem()">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
</ion-buttons>
</ion-navbar>