javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 14:58:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(components): update buttons to use slot for icons

Browse Source
This commit is contained in:
Brandy Carney
2017-06-14 11:40:49 -04:00
parent f89486cbc8
commit 005035bb46
32 changed files with 414 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,14 +39,14 @@
<h4>Icons</h4> <h4>Icons</h4>
<ion-button icon-start color="dark"> <ion-button color="dark">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
<ion-button icon-end color="dark"> <ion-button color="dark">
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-only color="dark"> <ion-button icon-only color="dark">

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

@ -58,9 +58,9 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end (click)="goToPage2()"> <ion-button (click)="goToPage2()">
Show Loading and Navigate Show Loading and Navigate
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

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

@ -49,15 +49,15 @@
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-buttons start> <ion-buttons start>
<button ion-button icon-only solid> <ion-button icon-only solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end solid color="secondary"> <ion-button solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -69,9 +69,9 @@
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end outline color="secondary"> <ion-button outline color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>

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

@ -49,36 +49,36 @@
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-buttons start> <ion-buttons start>
<button ion-button icon-only solid> <ion-button icon-only solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end solid color="secondary"> <ion-button solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-buttons start> <ion-buttons start>
<button ion-button icon-only outline> <ion-button icon-only outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end outline color="secondary"> <ion-button outline color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<button ion-button icon-only menuToggle> <ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
<ion-title>Left Menu</ion-title> <ion-title>Left Menu</ion-title>
@ -86,14 +86,14 @@
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-title>Right Menu</ion-title> <ion-title>Right Menu</ion-title>
<button ion-button menuToggle right> <ion-button menuToggle right>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top *ngIf="demo != 'Title'"> <ion-toolbar no-border-top *ngIf="demo != 'Title'">
<ion-buttons end> <ion-buttons end>
<button ion-button icon-only #button2 (click)="buttonClick(button2)"> <ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>

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

@ -49,36 +49,36 @@
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-buttons start> <ion-buttons start>
<button ion-button icon-only solid> <ion-button icon-only solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end solid color="secondary"> <ion-button solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-buttons start> <ion-buttons start>
<button ion-button icon-only outline> <ion-button icon-only outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-end outline color="secondary"> <ion-button outline color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<button ion-button icon-only menuToggle> <ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
<ion-title>Left Menu</ion-title> <ion-title>Left Menu</ion-title>
@ -86,14 +86,14 @@
<ion-toolbar no-border-top> <ion-toolbar no-border-top>
<ion-title>Right Menu</ion-title> <ion-title>Right Menu</ion-title>
<button ion-button menuToggle right> <ion-button menuToggle right>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
</ion-toolbar> </ion-toolbar>
<ion-toolbar no-border-top *ngIf="demo != 'Title'"> <ion-toolbar no-border-top *ngIf="demo != 'Title'">
<ion-buttons end> <ion-buttons end>
<button ion-button icon-only #button2 (click)="buttonClick(button2)"> <ion-button icon-only #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>

8
src/components/action-sheet/action-sheet-component.ts
View File

@ -22,14 +22,14 @@ import { ViewController } from '../../navigation/view-controller';
'<div class="action-sheet-group">' + '<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' + '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' + '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<ion-button button-type="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' + '<ion-button button-type="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' + '<ion-icon slot="start" [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
'{{b.text}}' + '{{b.text}}' +
'</ion-button>' + '</ion-button>' +
'</div>' + '</div>' +
'<div class="action-sheet-group" *ngIf="cancelButton">' + '<div class="action-sheet-group" *ngIf="cancelButton">' +
'<ion-button button-type="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' + '<ion-button button-type="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [ngClass]="cancelButton.cssClass">' +
'<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' + '<ion-icon slot="start" [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
'{{cancelButton.text}}' + '{{cancelButton.text}}' +
'</ion-button>' + '</ion-button>' +
'</div>' + '</div>' +

8
src/components/button/button.tsx
View File

@ -38,14 +38,14 @@ import { CssClassObject } from '../../util/interfaces';
* <ion-button round outline>Outline + Round</ion-button> * <ion-button round outline>Outline + Round</ion-button>
* *
* <!-- Icons --> * <!-- Icons -->
* <ion-button icon-start> * <ion-button>
* <ion-icon name="star"></ion-icon> * <ion-icon slot="start" name="star"></ion-icon>
* Left Icon * Left Icon
* </ion-button> * </ion-button>
* *
* <ion-button icon-end> * <ion-button>
* Right Icon * Right Icon
* <ion-icon name="star"></ion-icon> * <ion-icon slot="end" name="star"></ion-icon>
* </ion-button> * </ion-button>
* *
* <ion-button icon-only> * <ion-button icon-only>

4
src/components/button/test/block/pages/page-one/page-one.html
View File

@ -15,8 +15,8 @@
</p> </p>
<p> <p>
<ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button> <ion-button block href="#"><ion-icon slot="start" name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button>
<ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button> <ion-button block><ion-icon slot="start" name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
</p> </p>
<p> <p>

438
src/components/button/test/button.spec.ts
View File

@ -1,264 +1,264 @@
import { Button } from '../button'; // import { Button } from '../button';
import { Config } from '../../../config/config'; // import { Config } from '../../../config/config';
import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers'; // import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
describe('button', () => { // describe('button', () => {
it('should set a different button role', () => { // it('should set a different button role', () => {
let b = mockButton(); // let b = mockButton();
b.outline = true; // b.outline = true;
b.small = true; // b.small = true;
b.full = true; // b.full = true;
b.color = 'primary'; // b.color = 'primary';
b.setRole('bar-button'); // b.setRole('bar-button');
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'bar-button-outline')).toEqual(true); // expect(hasClass(b, 'bar-button-outline')).toEqual(true);
expect(hasClass(b, 'bar-button-small')).toEqual(true); // expect(hasClass(b, 'bar-button-small')).toEqual(true);
expect(hasClass(b, 'bar-button-full')).toEqual(true); // expect(hasClass(b, 'bar-button-full')).toEqual(true);
expect(hasClass(b, 'bar-button-outline-ios-primary')).toEqual(true); // expect(hasClass(b, 'bar-button-outline-ios-primary')).toEqual(true);
expect(hasClass(b, 'button-outline')).toEqual(false); // expect(hasClass(b, 'button-outline')).toEqual(false);
expect(hasClass(b, 'button-small')).toEqual(false); // expect(hasClass(b, 'button-small')).toEqual(false);
expect(hasClass(b, 'button-full')).toEqual(false); // expect(hasClass(b, 'button-full')).toEqual(false);
expect(hasClass(b, 'button-primary')).toEqual(false); // expect(hasClass(b, 'button-primary')).toEqual(false);
}); // });
it('should remove button color attributes and add different role', () => { // it('should remove button color attributes and add different role', () => {
let b = mockButton(); // let b = mockButton();
b.outline = true; // b.outline = true;
b.small = true; // b.small = true;
b.full = true; // b.full = true;
b.color = 'primary'; // b.color = 'primary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-outline')).toEqual(true); // expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true); // expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true); // expect(hasClass(b, 'button-full')).toEqual(true);
expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true); // expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
b._assignCss(false); // b._assignCss(false);
expect(hasClass(b, 'button-outline')).toEqual(false); // expect(hasClass(b, 'button-outline')).toEqual(false);
expect(hasClass(b, 'button-small')).toEqual(false); // expect(hasClass(b, 'button-small')).toEqual(false);
expect(hasClass(b, 'button-full')).toEqual(false); // expect(hasClass(b, 'button-full')).toEqual(false);
expect(hasClass(b, 'button-outline-ios-primary')).toEqual(false); // expect(hasClass(b, 'button-outline-ios-primary')).toEqual(false);
}); // });
it('should read button color attributes with styles', () => { // it('should read button color attributes with styles', () => {
let b = mockButton(); // let b = mockButton();
b.outline = true; // b.outline = true;
b.small = true; // b.small = true;
b.full = true; // b.full = true;
b.color = 'primary'; // b.color = 'primary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-outline')).toEqual(true); // expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true); // expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true); // expect(hasClass(b, 'button-full')).toEqual(true);
expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true); // expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
b = mockButton(); // b = mockButton();
b.clear = true; // b.clear = true;
b.color = 'primary'; // b.color = 'primary';
b.color = 'secondary'; // b.color = 'secondary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-clear')).toEqual(true); // expect(hasClass(b, 'button-clear')).toEqual(true);
expect(hasClass(b, 'button-clear-ios-primary')).toEqual(false); // expect(hasClass(b, 'button-clear-ios-primary')).toEqual(false);
expect(hasClass(b, 'button-clear-ios-secondary')).toEqual(true); // expect(hasClass(b, 'button-clear-ios-secondary')).toEqual(true);
b = mockButton(); // b = mockButton();
b.solid = true; // b.solid = true;
b.color = 'primary'; // b.color = 'primary';
b.color = 'secondary'; // b.color = 'secondary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-solid')).toEqual(true); // expect(hasClass(b, 'button-solid')).toEqual(true);
expect(hasClass(b, 'button-ios-primary')).toEqual(false); // expect(hasClass(b, 'button-ios-primary')).toEqual(false);
expect(hasClass(b, 'button-ios-secondary')).toEqual(true); // expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
b = mockButton(); // b = mockButton();
b.solid = true; // b.solid = true;
b.color = 'primary'; // b.color = 'primary';
b.color = 'secondary'; // b.color = 'secondary';
b.setRole('bar-button'); // b.setRole('bar-button');
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'bar-button-solid')).toEqual(true); // expect(hasClass(b, 'bar-button-solid')).toEqual(true);
expect(hasClass(b, 'bar-button-solid-ios-primary')).toEqual(false); // expect(hasClass(b, 'bar-button-solid-ios-primary')).toEqual(false);
expect(hasClass(b, 'bar-button-solid-ios-secondary')).toEqual(true); // expect(hasClass(b, 'bar-button-solid-ios-secondary')).toEqual(true);
}); // });
it('should auto add the default style', () => { // it('should auto add the default style', () => {
let b = mockButton(); // let b = mockButton();
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(true); // expect(hasClass(b, 'button-default')).toEqual(true);
b = mockButton(); // b = mockButton();
b.clear = true; // b.clear = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-default')).toEqual(false); // expect(hasClass(b, 'button-default')).toEqual(false);
expect(hasClass(b, 'button-clear')).toEqual(true); // expect(hasClass(b, 'button-clear')).toEqual(true);
}); // });
it('should read button color attributes', () => { // it('should read button color attributes', () => {
let b = mockButton(); // let b = mockButton();
b.color = 'primary'; // b.color = 'primary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-ios-primary')).toEqual(true); // expect(hasClass(b, 'button-ios-primary')).toEqual(true);
b = mockButton(); // b = mockButton();
b.color = 'primary'; // b.color = 'primary';
b.color = 'secondary'; // b.color = 'secondary';
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-ios-primary')).toEqual(false); // expect(hasClass(b, 'button-ios-primary')).toEqual(false);
expect(hasClass(b, 'button-ios-secondary')).toEqual(true); // expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
}); // });
it('should read button style attributes', () => { // it('should read button style attributes', () => {
let b = mockButton(); // let b = mockButton();
b.clear = true; // b.clear = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-clear')).toEqual(true); // expect(hasClass(b, 'button-clear')).toEqual(true);
b = mockButton(); // b = mockButton();
b.outline = true; // b.outline = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-outline')).toEqual(true); // expect(hasClass(b, 'button-outline')).toEqual(true);
b = mockButton(); // b = mockButton();
b.solid = true; // b.solid = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-solid')).toEqual(true); // expect(hasClass(b, 'button-solid')).toEqual(true);
b = mockButton(); // b = mockButton();
b.clear = true; // b.clear = true;
b.outline = true; // b.outline = true;
b.small = true; // b.small = true;
b.full = true; // b.full = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-clear')).toEqual(false); // expect(hasClass(b, 'button-clear')).toEqual(false);
expect(hasClass(b, 'button-outline')).toEqual(true); // expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true); // expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true); // expect(hasClass(b, 'button-full')).toEqual(true);
b = mockButton(); // b = mockButton();
b.outline = true; // b.outline = true;
b.setRole('bar-button'); // b.setRole('bar-button');
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'bar-button-outline')).toEqual(true); // expect(hasClass(b, 'bar-button-outline')).toEqual(true);
}); // });
it('should read button shape attributes', () => { // it('should read button shape attributes', () => {
let b = mockButton(); // let b = mockButton();
b.round = true; // b.round = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-round')).toEqual(true); // expect(hasClass(b, 'button-round')).toEqual(true);
}); // });
it('should read button display attributes', () => { // it('should read button display attributes', () => {
let b = mockButton(); // let b = mockButton();
b.block = true; // b.block = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-block')).toEqual(true); // expect(hasClass(b, 'button-block')).toEqual(true);
b = mockButton(); // b = mockButton();
b.full = true; // b.full = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-full')).toEqual(true); // expect(hasClass(b, 'button-full')).toEqual(true);
b = mockButton(); // b = mockButton();
b.block = true; // b.block = true;
b.full = true; // b.full = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-block')).toEqual(false); // expect(hasClass(b, 'button-block')).toEqual(false);
expect(hasClass(b, 'button-full')).toEqual(true); // expect(hasClass(b, 'button-full')).toEqual(true);
}); // });
it('should read button size attributes', () => { // it('should read button size attributes', () => {
let b = mockButton(); // let b = mockButton();
b.small = true; // b.small = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-small')).toEqual(true); // expect(hasClass(b, 'button-small')).toEqual(true);
b = mockButton(); // b = mockButton();
b.large = true; // b.large = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-large')).toEqual(true); // expect(hasClass(b, 'button-large')).toEqual(true);
b = mockButton(); // b = mockButton();
b.large = true; // b.large = true;
b.small = true; // b.small = true;
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button-large')).toEqual(false); // expect(hasClass(b, 'button-large')).toEqual(false);
expect(hasClass(b, 'button-small')).toEqual(true); // expect(hasClass(b, 'button-small')).toEqual(true);
}); // });
it('should add button css class', () => { // it('should add button css class', () => {
let b = mockButton(); // let b = mockButton();
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
}); // });
it('should add disable-hover css class', () => { // it('should add disable-hover css class', () => {
let config = mockConfig({ // let config = mockConfig({
hoverCSS: false // hoverCSS: false
}); // });
let b = mockButton(config); // let b = mockButton(config);
expect(hasClass(b, 'disable-hover')).toEqual(true); // expect(hasClass(b, 'disable-hover')).toEqual(true);
}); // });
it('should set defaults', () => { // it('should set defaults', () => {
let b = mockButton(); // let b = mockButton();
expect(b._role).toEqual('button'); // expect(b._role).toEqual('button');
expect(b._size).toEqual(undefined); // expect(b._size).toEqual(undefined);
expect(b._color).toEqual(undefined); // expect(b._color).toEqual(undefined);
expect(b._style).toEqual('default'); // expect(b._style).toEqual('default');
expect(b._display).toEqual(undefined); // expect(b._display).toEqual(undefined);
}); // });
it('should set different modes', () => { // it('should set different modes', () => {
let b = mockButton(); // let b = mockButton();
b._assignCss(true); // b._assignCss(true);
expect(b._mode).toEqual('ios'); // expect(b._mode).toEqual('ios');
expect(hasClass(b, 'button')).toEqual(true); // expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-ios')).toEqual(true); // expect(hasClass(b, 'button-ios')).toEqual(true);
b.mode = 'wp'; // b.mode = 'wp';
expect(b._mode).toEqual('wp'); // expect(b._mode).toEqual('wp');
expect(hasClass(b, 'button-wp')).toEqual(true); // expect(hasClass(b, 'button-wp')).toEqual(true);
b.mode = 'blah'; // b.mode = 'blah';
expect(b._mode).toEqual('blah'); // expect(b._mode).toEqual('blah');
expect(hasClass(b, 'button-blah')).toEqual(true); // expect(hasClass(b, 'button-blah')).toEqual(true);
}); // });
it('should add alert-button css class', () => { // it('should add alert-button css class', () => {
let b = mockButton(null, 'alert-button'); // let b = mockButton(null, 'alert-button');
b._assignCss(true); // b._assignCss(true);
expect(hasClass(b, 'alert-button')).toEqual(true); // expect(hasClass(b, 'alert-button')).toEqual(true);
}); // });
}); // });
function mockButton(config?: Config, ionButton?: string) { // function mockButton(config?: Config, ionButton?: string) {
config = config || mockConfig(); // config = config || mockConfig();
ionButton = ionButton || ''; // ionButton = ionButton || '';
let b = new Button(ionButton, config, mockElementRef(), mockRenderer()); // let b = new Button(ionButton, config, mockElementRef(), mockRenderer());
b._init = true; // b._init = true;
b.mode = 'ios'; // b.mode = 'ios';
return b; // return b;
} // }
function hasClass(button: any, className: string) { // function hasClass(button: any, className: string) {
return button._elementRef.nativeElement.classList.contains(className); // return button._elementRef.nativeElement.classList.contains(className);
} // }

8
src/components/button/test/full/pages/page-one/page-one.html
View File

@ -15,12 +15,12 @@
</p> </p>
<p> <p>
<ion-button full href="#" icon-start> <ion-button full href="#">
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="start" name="help-circle"></ion-icon>
a[ion-button][full] + icon a[ion-button][full] + icon
</ion-button> </ion-button>
<ion-button full icon-start> <ion-button full>
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="start" name="help-circle"></ion-icon>
button[ion-button][full] + icon button[ion-button][full] + icon
</ion-button> </ion-button>
</p> </p>

48
src/components/button/test/icons/pages/page-one/page-one.html
View File

@ -10,24 +10,24 @@
<ion-content padding> <ion-content padding>
<div> <div>
<ion-button icon-start> <ion-button>
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
<ion-button href="#" icon-start> <ion-button href="#">
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
</div> </div>
<div> <div>
<ion-button icon-end> <ion-button>
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
<ion-button href="#" icon-end> <ion-button href="#">
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
</div> </div>
@ -41,24 +41,24 @@
</div> </div>
<div> <div>
<ion-button large icon-start> <ion-button large>
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="start" name="help-circle"></ion-icon>
Left, Large Left, Large
</ion-button> </ion-button>
<ion-button href="#" large icon-start> <ion-button href="#" large>
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="start" name="help-circle"></ion-icon>
Left, Large Left, Large
</ion-button> </ion-button>
</div> </div>
<div> <div>
<ion-button large icon-end> <ion-button large>
Right, Large Right, Large
<ion-icon name="settings"></ion-icon> <ion-icon slot="end" name="settings"></ion-icon>
</ion-button> </ion-button>
<ion-button href="#" large icon-end> <ion-button href="#" large>
Right, Large Right, Large
<ion-icon name="settings"></ion-icon> <ion-icon slot="end" name="settings"></ion-icon>
</ion-button> </ion-button>
</div> </div>
@ -72,24 +72,24 @@
</div> </div>
<div> <div>
<ion-button small icon-start> <ion-button small>
<ion-icon name="checkmark"></ion-icon> <ion-icon slot="start" name="checkmark"></ion-icon>
Left, Small Left, Small
</ion-button> </ion-button>
<ion-button href="#" small icon-start> <ion-button href="#" small>
<ion-icon name="checkmark"></ion-icon> <ion-icon slot="start" name="checkmark"></ion-icon>
Left, Small Left, Small
</ion-button> </ion-button>
</div> </div>
<div> <div>
<ion-button small icon-end> <ion-button small>
Right, Small Right, Small
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
<ion-button href="#" small icon-end> <ion-button href="#" small>
Right, Small Right, Small
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</div> </div>

28
src/components/card/test/advanced/pages/root-page/root-page.html
View File

@ -28,14 +28,14 @@
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col no-padding> <ion-col no-padding>
<ion-button icon-start clear small> <ion-button clear small>
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Star Star
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col no-padding text-right> <ion-col no-padding text-right>
<ion-button icon-start clear small class="activated"> <ion-button clear small class="activated">
<ion-icon name="share"></ion-icon> <ion-icon slot="start" name="share"></ion-icon>
Activated Activated
</ion-button> </ion-button>
</ion-col> </ion-col>
@ -66,14 +66,14 @@
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col no-padding> <ion-col no-padding>
<ion-button icon-start clear small> <ion-button clear small>
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Favorite Favorite
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col no-padding text-center> <ion-col no-padding text-center>
<ion-button icon-start clear small> <ion-button clear small>
<ion-icon name="musical-notes"></ion-icon> <ion-icon slot="start" name="musical-notes"></ion-icon>
Listen Listen
</ion-button> </ion-button>
</ion-col> </ion-col>
@ -99,21 +99,21 @@
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col no-padding> <ion-col no-padding>
<ion-button icon-start clear small dark> <ion-button clear small dark>
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Favorite Favorite
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col no-padding text-center> <ion-col no-padding text-center>
<ion-button icon-start clear small dark> <ion-button clear small dark>
<ion-icon name="musical-notes"></ion-icon> <ion-icon slot="start" name="musical-notes"></ion-icon>
Listen Listen
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col no-padding text-right> <ion-col no-padding text-right>
<ion-button icon-start clear small dark> <ion-button clear small dark>
<ion-icon name="share-alt"></ion-icon> <ion-icon slot="start" name="share-alt"></ion-icon>
Share Share
</ion-button> </ion-button>
</ion-col> </ion-col>

8
src/components/card/test/colors/pages/root-page/root-page.html
View File

@ -71,14 +71,14 @@
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col no-padding> <ion-col no-padding>
<ion-button icon-start clear small color="danger"> <ion-button clear small color="danger">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Danger Danger
</ion-button> </ion-button>
</ion-col> </ion-col>
<ion-col no-padding text-right> <ion-col no-padding text-right>
<ion-button icon-start clear small color="dark"> <ion-button clear small color="dark">
<ion-icon name="share"></ion-icon> <ion-icon slot="start" name="share"></ion-icon>
Dark Dark
</ion-button> </ion-button>
</ion-col> </ion-col>

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

@ -31,8 +31,8 @@
<ion-item> <ion-item>
<span item-start>18 min</span> <span item-start>18 min</span>
<span item-start>(2.6 mi)</span> <span item-start>(2.6 mi)</span>
<ion-button icon-start primary clear item-end> <ion-button primary clear item-end>
<ion-icon name="navigate"></ion-icon> <ion-icon slot="start" name="navigate"></ion-icon>
Start Start
</ion-button> </ion-button>
</ion-item> </ion-item>
@ -61,8 +61,8 @@
<ion-item> <ion-item>
<span item-start>3 hr</span> <span item-start>3 hr</span>
<span item-start>(4.8 mi)</span> <span item-start>(4.8 mi)</span>
<ion-button icon-start danger clear item-end> <ion-button danger clear item-end>
<ion-icon name="navigate"></ion-icon> <ion-icon slot="start" name="navigate"></ion-icon>
Start Start
</ion-button> </ion-button>
</ion-item> </ion-item>
@ -91,8 +91,8 @@
<ion-item> <ion-item>
<span item-start secondary>26 min</span> <span item-start secondary>26 min</span>
<span item-start>(8.1 mi)</span> <span item-start>(8.1 mi)</span>
<ion-button icon-start secondary clear item-end> <ion-button secondary clear item-end>
<ion-icon name="navigate"></ion-icon> <ion-icon slot="start" name="navigate"></ion-icon>
Start Start
</ion-button> </ion-button>
</ion-item> </ion-item>

24
src/components/card/test/social/main.html
View File

@ -26,12 +26,12 @@
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon slot="start" name="thumbs-up"></ion-icon>
<div>12 Likes</div> <div>12 Likes</div>
</ion-button> </ion-button>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="text"></ion-icon> <ion-icon slot="start" name="text"></ion-icon>
<div>4 Comments</div> <div>4 Comments</div>
</ion-button> </ion-button>
<ion-note item-right> <ion-note item-right>
@ -59,12 +59,12 @@
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon slot="start" name="thumbs-up"></ion-icon>
<div>30 Likes</div> <div>30 Likes</div>
</ion-button> </ion-button>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="text"></ion-icon> <ion-icon slot="start" name="text"></ion-icon>
<div>64 Comments</div> <div>64 Comments</div>
</ion-button> </ion-button>
<ion-note item-right> <ion-note item-right>
@ -91,12 +91,12 @@
</ion-card-content> </ion-card-content>
<ion-item> <ion-item>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="thumbs-up"></ion-icon> <ion-icon slot="start" name="thumbs-up"></ion-icon>
<div>46 Likes</div> <div>46 Likes</div>
</ion-button> </ion-button>
<ion-button icon-start primary clear item-start> <ion-button primary clear item-start>
<ion-icon name="text"></ion-icon> <ion-icon slot="start" name="text"></ion-icon>
<div>66 Comments</div> <div>66 Comments</div>
</ion-button> </ion-button>
<ion-note item-right> <ion-note item-right>

4
src/components/content/test/basic/pages/page-five/page-five.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 4</ion-title> <ion-title>Page 4</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="tabsPage"> <ion-button [navPush]="tabsPage">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/basic/pages/page-four/page-four.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 3</ion-title> <ion-title>Page 3</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page4"> <ion-button [navPush]="page4">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/basic/pages/page-one/page-one.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Main</ion-title> <ion-title>Main</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page1"> <ion-button [navPush]="page1">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/basic/pages/page-three/page-three.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 2</ion-title> <ion-title>Page 2</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page3"> <ion-button [navPush]="page3">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/fullscreen/pages/page-five/page-five.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 4</ion-title> <ion-title>Page 4</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="tabsPage"> <ion-button [navPush]="tabsPage">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/fullscreen/pages/page-four/page-four.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 3</ion-title> <ion-title>Page 3</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page4"> <ion-button [navPush]="page4">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/fullscreen/pages/page-one/page-one.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Main</ion-title> <ion-title>Main</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page1"> <ion-button [navPush]="page1">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/content/test/fullscreen/pages/page-three/page-three.html
View File

@ -2,9 +2,9 @@
<ion-navbar style="opacity: 0.8"> <ion-navbar style="opacity: 0.8">
<ion-title>Page 2</ion-title> <ion-title>Page 2</ion-title>
<ion-buttons right> <ion-buttons right>
<ion-button icon-end [navPush]="page3"> <ion-button [navPush]="page3">
Next Next
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

4
src/components/icon/test/basic/main.html
View File

@ -119,8 +119,8 @@
</ion-list> </ion-list>
<p> <p>
<ion-button icon-start (click)="updateIcon()"> <ion-button (click)="updateIcon()">
<ion-icon [name]="btnIcon"></ion-icon> <ion-icon slot="start" [name]="btnIcon"></ion-icon>
Update icon Update icon
</ion-button> </ion-button>
</p> </p>

4
src/components/icon/test/basic/pages/root-page/root-page.html
View File

@ -119,8 +119,8 @@
</ion-list> </ion-list>
<p> <p>
<ion-button icon-start (click)="updateIcon()"> <ion-button (click)="updateIcon()">
<ion-icon [name]="btnIcon"></ion-icon> <ion-icon slot="start" [name]="btnIcon"></ion-icon>
Update icon Update icon
</ion-button> </ion-button>
</p> </p>

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

@ -40,26 +40,26 @@
</ion-item> </ion-item>
<button ion-item disabled> <button ion-item disabled>
<ion-button item-start icon-start (click)="testClick($event)"> <ion-button item-start (click)="testClick($event)">
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
disabled left icon buttons disabled left icon buttons
<ion-button outline item-end icon-start (click)="testClick($event)"> <ion-button outline item-end (click)="testClick($event)">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
</button> </button>
<ion-item> <ion-item>
<ion-button item-start icon-end (click)="testClick($event)"> <ion-button item-start (click)="testClick($event)">
Right Icon Right Icon
<ion-icon name="home"></ion-icon> <ion-icon slot="end" name="home"></ion-icon>
</ion-button> </ion-button>
right icon buttons right icon buttons
<ion-button outline item-end icon-end (click)="testClick($event)"> <ion-button outline item-end (click)="testClick($event)">
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
</ion-item> </ion-item>
@ -75,15 +75,15 @@
<a ion-item disabled> <a ion-item disabled>
a ion-item disabled right icon/text button large a ion-item disabled right icon/text button large
<ion-button item-end large icon-start (click)="testClick($event)"> <ion-button item-end large (click)="testClick($event)">
<ion-icon name="refresh"></ion-icon> <ion-icon slot="start" name="refresh"></ion-icon>
Refresh Refresh
</ion-button> </ion-button>
</a> </a>
<ion-item> <ion-item>
<ion-button clear item-start small icon-start (click)="testClick($event)"> <ion-button clear item-start small (click)="testClick($event)">
<ion-icon name="settings"></ion-icon> <ion-icon slot="start" name="settings"></ion-icon>
Settings Settings
</ion-button> </ion-button>
ion-item left clear button small ion-item left clear button small

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

@ -44,8 +44,8 @@
</ion-item> </ion-item>
<button ion-item color="dark"> <button ion-item color="dark">
<ion-button item-start icon-start> <ion-button item-start>
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
left icon buttons left icon buttons
@ -53,8 +53,8 @@
</button> </button>
<button ion-item disabled color="dark"> <button ion-item disabled color="dark">
<ion-button item-start icon-start> <ion-button item-start>
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
disabled left icon buttons disabled left icon buttons
@ -62,14 +62,14 @@
</button> </button>
<ion-item color="light"> <ion-item color="light">
<ion-button item-start icon-end> <ion-button item-start>
Right Icon Right Icon
<ion-icon name="home"></ion-icon> <ion-icon slot="end" name="home"></ion-icon>
</ion-button> </ion-button>
right icon buttons right icon buttons
<ion-button outline item-end icon-end> <ion-button outline item-end>
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
</ion-item> </ion-item>

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

@ -30,26 +30,26 @@
</ion-list-header> </ion-list-header>
<ion-list-header disabled> <ion-list-header disabled>
<ion-button icon-start item-start (click)="testClick($event)"> <ion-button item-start (click)="testClick($event)">
<ion-icon name="home"></ion-icon> <ion-icon slot="start" name="home"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
disabled left icon buttons disabled left icon buttons
<ion-button icon-start outline item-end (click)="testClick($event)"> <ion-button outline item-end (click)="testClick($event)">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Left Icon Left Icon
</ion-button> </ion-button>
</ion-list-header> </ion-list-header>
<ion-list-header color="dark"> <ion-list-header color="dark">
<ion-button icon-end item-start (click)="testClick($event)"> <ion-button item-start (click)="testClick($event)">
Right Icon Right Icon
<ion-icon name="home"></ion-icon> <ion-icon slot="end" name="home"></ion-icon>
</ion-button> </ion-button>
Dark right icon buttons Dark right icon buttons
<ion-button icon-end outline item-end (click)="testClick($event)"> <ion-button outline item-end (click)="testClick($event)">
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon slot="end" name="star"></ion-icon>
</ion-button> </ion-button>
</ion-list-header> </ion-list-header>
@ -65,15 +65,15 @@
<ion-list-header> <ion-list-header>
ion-list-header right icon/text button large ion-list-header right icon/text button large
<ion-button item-end icon-start large (click)="testClick($event)"> <ion-button item-end large (click)="testClick($event)">
<ion-icon name="refresh"></ion-icon> <ion-icon slot="start" name="refresh"></ion-icon>
Refresh Refresh
</ion-button> </ion-button>
</ion-list-header> </ion-list-header>
<ion-list-header> <ion-list-header>
<ion-button clear item-start icon-start small (click)="testClick($event)"> <ion-button clear item-start small (click)="testClick($event)">
<ion-icon name="settings"></ion-icon> <ion-icon slot="start" name="settings"></ion-icon>
Settings Settings
</ion-button> </ion-button>
ion-list-header left clear button small ion-list-header left clear button small

4
src/components/loading/test/basic/pages/page-one/page-one.html
View File

@ -32,9 +32,9 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end (click)="goToPage2()"> <ion-button (click)="goToPage2()">
Navigate Navigate
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

4
src/components/loading/test/basic/pages/page-two/page-two.html
View File

@ -7,9 +7,9 @@
<ion-footer> <ion-footer>
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end (click)="goToPage3()"> <ion-button (click)="goToPage3()">
Navigate Navigate
<ion-icon name="arrow-forward"></ion-icon> <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>

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

@ -63,16 +63,16 @@
<ion-button icon-only color="primary"> <ion-button icon-only color="primary">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start solid> <ion-button solid>
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary</ion-title> <ion-title>Secondary</ion-title>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end solid color="danger"> <ion-button solid color="danger">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -82,16 +82,16 @@
<ion-button icon-only color="primary" class="activated"> <ion-button icon-only color="primary" class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start solid class="activated"> <ion-button solid class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Secondary Activated</ion-title> <ion-title>Secondary Activated</ion-title>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end solid color="danger" class="activated"> <ion-button solid color="danger" class="activated">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -101,8 +101,8 @@
<ion-button icon-only outline> <ion-button icon-only outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start outline> <ion-button outline>
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Star Star
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -119,8 +119,8 @@
<ion-button outline icon-only class="activated"> <ion-button outline icon-only class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button outline icon-start class="activated"> <ion-button outline class="activated">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Star Star
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -134,15 +134,15 @@
<ion-toolbar color="danger"> <ion-toolbar color="danger">
<ion-buttons start> <ion-buttons start>
<ion-button icon-start> <ion-button>
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Clear Clear
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end> <ion-button>
Edit Edit
<ion-icon name="create"></ion-icon> <ion-icon slot="end" name="create"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
@ -162,15 +162,15 @@
<ion-toolbar color="light"> <ion-toolbar color="light">
<ion-buttons start> <ion-buttons start>
<ion-button icon-start> <ion-button>
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Clear Clear
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end> <ion-button>
Edit Edit
<ion-icon name="create"></ion-icon> <ion-icon slot="end" name="create"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Light</ion-title> <ion-title>Light</ion-title>

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

@ -64,16 +64,16 @@
<ion-button icon-only solid> <ion-button icon-only solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start solid> <ion-button solid>
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end solid color="secondary"> <ion-button solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -83,16 +83,16 @@
<ion-button href="#" icon-only solid class="activated"> <ion-button href="#" icon-only solid class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start solid class="activated"> <ion-button solid class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Solid Solid
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Solid Activated</ion-title> <ion-title>Solid Activated</ion-title>
<ion-buttons end> <ion-buttons end>
<ion-button icon-end solid color="secondary" class="activated"> <ion-button solid color="secondary" class="activated">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon slot="end" name="help-circle"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -102,8 +102,8 @@
<ion-button icon-only outline> <ion-button icon-only outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start outline> <ion-button outline>
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Star Star
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -120,8 +120,8 @@
<ion-button icon-only outline class="activated"> <ion-button icon-only outline class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
</ion-button> </ion-button>
<ion-button icon-start outline class="activated"> <ion-button outline class="activated">
<ion-icon name="star"></ion-icon> <ion-icon slot="start" name="star"></ion-icon>
Star Star
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
@ -135,15 +135,15 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<ion-button icon-start> <ion-button>
<ion-icon name="contact"></ion-icon> <ion-icon slot="start" name="contact"></ion-icon>
Clear Clear
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<ion-button href="#" icon-end href="#"> <ion-button href="#" href="#">
Edit Edit
<ion-icon name="create"></ion-icon> <ion-icon slot="end" name="create"></ion-icon>
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
<ion-title>Icon/Color Attr</ion-title> <ion-title>Icon/Color Attr</ion-title>