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

chore(): update dependencies

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-22 20:08:02 +02:00
parent 3f8fcda366
commit ae0541a465
48 changed files with 1299 additions and 1720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
angular/src/directives/proxies.ts
View File

File diff suppressed because one or more lines are too long

983
angular/test/nav/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1322
core/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
core/package.json
View File

@ -28,23 +28,16 @@
"@stencil/dev-server": "latest", "@stencil/dev-server": "latest",
"@stencil/sass": "0.0.3", "@stencil/sass": "0.0.3",
"@stencil/utils": "latest", "@stencil/utils": "latest",
"@types/jest": "^21.1.6", "@types/jest": "^22.2.3",
"chai": "^4.1.2", "chai": "^4.1.2",
"chalk": "^2.3.2",
"chromedriver": "^2.37.0", "chromedriver": "^2.37.0",
"execa": "^0.9.0", "jest": "^22.4.3",
"fs-extra": "^5.0.0",
"glob": "^7.1.2",
"inquirer": "^5.2.0",
"jest": "^21.2.1",
"listr": "^0.13.0",
"mocha": "^4.0.1", "mocha": "^4.0.1",
"np": "^2.17.0", "np": "^2.17.0",
"sass-lint": "^1.12.1", "sass-lint": "^1.12.1",
"selenium-webdriver": "^3.6.0", "selenium-webdriver": "^3.6.0",
"semver": "^5.5.0",
"tslint": "^5.8.0", "tslint": "^5.8.0",
"tslint-ionic-rules": "0.0.13", "tslint-ionic-rules": "0.0.14",
"yargs": "^10.0.3" "yargs": "^10.0.3"
}, },
"scripts": { "scripts": {

20
core/src/components.d.ts vendored
View File

@ -125,6 +125,10 @@ import {
import { import {
FrameworkDelegate as FrameworkDelegate3, FrameworkDelegate as FrameworkDelegate3,
} from './utils/framework-delegate'; } from './utils/framework-delegate';
import {
TabbarLayout,
TabbarPlacement,
} from './components/tabbar/tabbar';
import { import {
DomRenderFn, DomRenderFn,
HeaderFn, HeaderFn,
@ -6432,8 +6436,8 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonTabbar { interface IonTabbar {
'highlight': boolean; 'highlight': boolean;
'layout': string; 'layout': TabbarLayout;
'placement': string; 'placement': TabbarPlacement;
'scrollable': boolean; 'scrollable': boolean;
'selectedTab': HTMLIonTabElement; 'selectedTab': HTMLIonTabElement;
'tabs': HTMLIonTabElement[]; 'tabs': HTMLIonTabElement[];
@ -6464,8 +6468,8 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonTabbarAttributes extends HTMLAttributes { export interface IonTabbarAttributes extends HTMLAttributes {
'highlight'?: boolean; 'highlight'?: boolean;
'layout'?: string; 'layout'?: TabbarLayout;
'placement'?: string; 'placement'?: TabbarPlacement;
'scrollable'?: boolean; 'scrollable'?: boolean;
'selectedTab'?: HTMLIonTabElement; 'selectedTab'?: HTMLIonTabElement;
'tabs'?: HTMLIonTabElement[]; 'tabs'?: HTMLIonTabElement[];
@ -6507,11 +6511,11 @@ declare global {
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/ */
'tabbarLayout': string; 'tabbarLayout': TabbarLayout;
/** /**
* Set position of the tabbar: `top`, `bottom`. * Set position of the tabbar: `top`, `bottom`.
*/ */
'tabbarPlacement': string; 'tabbarPlacement': TabbarPlacement;
/** /**
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/ */
@ -6565,11 +6569,11 @@ declare global {
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/ */
'tabbarLayout'?: string; 'tabbarLayout'?: TabbarLayout;
/** /**
* Set position of the tabbar: `top`, `bottom`. * Set position of the tabbar: `top`, `bottom`.
*/ */
'tabbarPlacement'?: string; 'tabbarPlacement'?: TabbarPlacement;
/** /**
* If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
*/ */

20
core/src/components/action-sheet/action-sheet.tsx
View File

@ -227,22 +227,22 @@ export class ActionSheet implements OverlayInterface {
return [ return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>, <ion-backdrop tappable={this.enableBackdropDismiss}/>,
<div class='action-sheet-wrapper' role='dialog'> <div class="action-sheet-wrapper" role="dialog">
<div class='action-sheet-container'> <div class="action-sheet-container">
<div class='action-sheet-group'> <div class="action-sheet-group">
{this.header {this.header
? <div class='action-sheet-title'> ? <div class="action-sheet-title">
{this.header} {this.header}
{this.subHeader {this.subHeader
? <div class='action-sheet-sub-title'>{this.subHeader}</div> ? <div class="action-sheet-sub-title">{this.subHeader}</div>
: null} : null}
</div> </div>
: null} : null}
{buttons.map(b => {buttons.map(b =>
<button class={buttonClass(b)} onClick={() => this.buttonClick(b)}> <button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
<span class='action-sheet-button-inner'> <span class="action-sheet-button-inner">
{b.icon {b.icon
? <ion-icon name={b.icon} class='action-sheet-icon' /> ? <ion-icon name={b.icon} class="action-sheet-icon" />
: null} : null}
{b.text} {b.text}
</span> </span>
@ -250,16 +250,16 @@ export class ActionSheet implements OverlayInterface {
)} )}
</div> </div>
{cancelButton {cancelButton
? <div class='action-sheet-group action-sheet-group-cancel'> ? <div class="action-sheet-group action-sheet-group-cancel">
<button <button
class={buttonClass(cancelButton)} class={buttonClass(cancelButton)}
onClick={() => this.buttonClick(cancelButton)} onClick={() => this.buttonClick(cancelButton)}
> >
<span class='action-sheet-button-inner'> <span class="action-sheet-button-inner">
{cancelButton.icon {cancelButton.icon
? <ion-icon ? <ion-icon
name={cancelButton.icon} name={cancelButton.icon}
class='action-sheet-icon' class="action-sheet-icon"
/> />
: null} : null}
{cancelButton.text} {cancelButton.text}

38
core/src/components/alert/alert.tsx
View File

@ -307,12 +307,12 @@ export class Alert implements OverlayInterface {
return null; return null;
} }
return ( return (
<div class='alert-checkbox-group' aria-labelledby={labelledby}> <div class="alert-checkbox-group" aria-labelledby={labelledby}>
{ inputs.map((i) => ( { inputs.map((i) => (
<button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role='checkbox' class='alert-tappable alert-checkbox alert-checkbox-button'> <button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role="checkbox" class="alert-tappable alert-checkbox alert-checkbox-button">
<div class='alert-button-inner'> <div class="alert-button-inner">
<div class='alert-checkbox-icon'><div class='alert-checkbox-inner'></div></div> <div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
<div class='alert-checkbox-label'> <div class="alert-checkbox-label">
{i.label} {i.label}
</div> </div>
</div> </div>
@ -329,12 +329,12 @@ export class Alert implements OverlayInterface {
return null; return null;
} }
return ( return (
<div class='alert-radio-group' role='radiogroup' aria-labelledby={labelledby} aria-activedescendant={this.activeId}> <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
{ inputs.map((i) => ( { inputs.map((i) => (
<button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class='alert-radio-button alert-tappable alert-radio' role='radio'> <button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class="alert-radio-button alert-tappable alert-radio" role="radio">
<div class='alert-button-inner'> <div class="alert-button-inner">
<div class='alert-radio-icon'><div class='alert-radio-inner'></div></div> <div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
<div class='alert-radio-label'> <div class="alert-radio-label">
{i.label} {i.label}
</div> </div>
</div> </div>
@ -351,9 +351,9 @@ export class Alert implements OverlayInterface {
return null; return null;
} }
return ( return (
<div class='alert-input-group' aria-labelledby={labelledby}> <div class="alert-input-group" aria-labelledby={labelledby}>
{ inputs.map(i => ( { inputs.map(i => (
<div class='alert-input-wrapper'> <div class="alert-input-wrapper">
<input <input
placeholder={i.placeholder} placeholder={i.placeholder}
value={i.value} value={i.value}
@ -364,7 +364,7 @@ export class Alert implements OverlayInterface {
id={i.id} id={i.id}
disabled={i.disabled} disabled={i.disabled}
tabIndex={0} tabIndex={0}
class='alert-input'/> class="alert-input"/>
</div> </div>
))} ))}
</div> </div>
@ -414,21 +414,21 @@ export class Alert implements OverlayInterface {
return [ return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>, <ion-backdrop tappable={this.enableBackdropDismiss}/>,
<div class='alert-wrapper'> <div class="alert-wrapper">
<div class='alert-head'> <div class="alert-head">
{ this.header && <h2 id={hdrId} class='alert-title'>{this.header}</h2> } { this.header && <h2 id={hdrId} class="alert-title">{this.header}</h2> }
{ this.subHeader && <h2 id={subHdrId} class='alert-sub-title'>{this.subHeader}</h2> } { this.subHeader && <h2 id={subHdrId} class="alert-sub-title">{this.subHeader}</h2> }
</div> </div>
<div id={msgId} class='alert-message' innerHTML={this.message}></div> <div id={msgId} class="alert-message" innerHTML={this.message}></div>
{ this.renderAlertInputs(labelledById) } { this.renderAlertInputs(labelledById) }
<div class={alertButtonGroupClass}> <div class={alertButtonGroupClass}>
{buttons.map(button => {buttons.map(button =>
<button class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}> <button class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
<span class='alert-button-inner'> <span class="alert-button-inner">
{button.text} {button.text}
</span> </span>
</button> </button>

4
core/src/components/back-button/back-button.tsx
View File

@ -81,9 +81,9 @@ export class BackButton {
<button <button
class={backButtonClasses} class={backButtonClasses}
onClick={(ev) => this.onClick(ev)}> onClick={(ev) => this.onClick(ev)}>
<span class='back-button-inner'> <span class="back-button-inner">
{ backButtonIcon && <ion-icon name={backButtonIcon}/> } { backButtonIcon && <ion-icon name={backButtonIcon}/> }
{ this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> } { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</span> </span>
</button> </button>

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

@ -148,11 +148,11 @@ export class Button {
onKeyUp={this.onKeyUp.bind(this)} onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)} onBlur={this.onBlur.bind(this)}
onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}> onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
<span class='button-inner'> <span class="button-inner">
<slot name='icon-only'></slot> <slot name="icon-only"></slot>
<slot name='start'></slot> <slot name="start"></slot>
<slot></slot> <slot></slot>
<slot name='end'></slot> <slot name="end"></slot>
</span> </span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType> </TagType>

4
core/src/components/checkbox/checkbox.tsx
View File

@ -136,10 +136,10 @@ export class Checkbox implements CheckboxInput {
return [ return [
<div class={checkboxClasses}> <div class={checkboxClasses}>
<div class='checkbox-inner'></div> <div class="checkbox-inner"></div>
</div>, </div>,
<input <input
type='checkbox' type="checkbox"
id={this.inputId} id={this.inputId}
aria-labelledby={this.labelId} aria-labelledby={this.labelId}
onChange={this.onChange.bind(this)} onChange={this.onChange.bind(this)}

2
core/src/components/chip-button/chip-button.tsx
View File

@ -65,7 +65,7 @@ export class ChipButton {
class={buttonClasses} class={buttonClasses}
disabled={this.disabled} disabled={this.disabled}
href={this.href}> href={this.href}>
<span class='chip-button-inner'> <span class="chip-button-inner">
<slot></slot> <slot></slot>
</span> </span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }

4
core/src/components/content/content.tsx
View File

@ -143,8 +143,8 @@ export class Content {
forceOverscroll={this.forceOverscroll}> forceOverscroll={this.forceOverscroll}>
<slot></slot> <slot></slot>
</ion-scroll> </ion-scroll>
: <div class='scroll-inner'><slot></slot></div>, : <div class="scroll-inner"><slot></slot></div>,
<slot name='fixed'></slot> <slot name="fixed"></slot>
]; ];
} }
} }

6
core/src/components/datetime/datetime.tsx
View File

@ -599,13 +599,13 @@ export class Datetime {
return [ return [
<div class={ datetimeTextClasses }>{ datetimeText }</div>, <div class={ datetimeTextClasses }>{ datetimeText }</div>,
<button <button
type='button' type="button"
aria-haspopup='true' aria-haspopup="true"
id={this.datetimeId} id={this.datetimeId}
aria-labelledby={this.labelId} aria-labelledby={this.labelId}
aria-disabled={this.disabled ? 'true' : false} aria-disabled={this.disabled ? 'true' : false}
onClick={this.open.bind(this)} onClick={this.open.bind(this)}
class='datetime-cover'> class="datetime-cover">
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</button> </button>
]; ];

4
core/src/components/fab-button/fab-button.tsx
View File

@ -90,8 +90,8 @@ export class FabButton {
class={fabClasses} class={fabClasses}
disabled={this.disabled} disabled={this.disabled}
href={this.href}> href={this.href}>
<ion-icon name='close' class='fab-button-close-icon'></ion-icon> <ion-icon name="close" class="fab-button-close-icon"></ion-icon>
<span class='fab-button-inner'> <span class="fab-button-inner">
<slot></slot> <slot></slot>
</span> </span>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }

6
core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View File

@ -35,14 +35,14 @@ export class InfiniteScrollContent {
render() { render() {
return ( return (
<div class='infinite-loading'> <div class="infinite-loading">
{this.loadingSpinner && {this.loadingSpinner &&
<div class='infinite-loading-spinner'> <div class="infinite-loading-spinner">
<ion-spinner name={this.loadingSpinner}></ion-spinner> <ion-spinner name={this.loadingSpinner}></ion-spinner>
</div> </div>
} }
{this.loadingText && {this.loadingText &&
<div class='infinite-loading-text' innerHTML={this.loadingText}></div> <div class="infinite-loading-text" innerHTML={this.loadingText}></div>
} }
</div> </div>
); );

4
core/src/components/input/input.tsx
View File

@ -350,8 +350,8 @@ export class Input implements InputComponent {
onKeyDown={this.inputKeydown.bind(this)} onKeyDown={this.inputKeydown.bind(this)}
/>, />,
<button <button
type='button' type="button"
class='input-clear-icon' class="input-clear-icon"
hidden={this.clearInput !== true} hidden={this.clearInput !== true}
onClick={this.clearTextInput.bind(this)} onClick={this.clearTextInput.bind(this)}
onMouseDown={this.clearTextInput.bind(this)}/> onMouseDown={this.clearTextInput.bind(this)}/>

8
core/src/components/item-divider/item-divider.tsx
View File

@ -42,12 +42,12 @@ export class ItemDivider {
render() { render() {
return [ return [
<slot name='start'></slot>, <slot name="start"></slot>,
<div class='item-divider-inner'> <div class="item-divider-inner">
<div class='item-divider-wrapper'> <div class="item-divider-wrapper">
<slot></slot> <slot></slot>
</div> </div>
<slot name='end'></slot> <slot name="end"></slot>
</div> </div>
]; ];
} }

14
core/src/components/item-option/item-option.tsx
View File

@ -61,17 +61,17 @@ export class ItemOption {
return ( return (
<TagType <TagType
class='item-option-button' class="item-option-button"
disabled={this.disabled} disabled={this.disabled}
href={this.href} href={this.href}
onClick={this.clickedOptionButton.bind(this)}> onClick={this.clickedOptionButton.bind(this)}>
<span class='item-option-button-inner'> <span class="item-option-button-inner">
<slot name='start'></slot> <slot name="start"></slot>
<slot name='top'></slot> <slot name="top"></slot>
<slot name='icon-only'></slot> <slot name="icon-only"></slot>
<slot></slot> <slot></slot>
<slot name='bottom'></slot> <slot name="bottom"></slot>
<slot name='end'></slot> <slot name="end"></slot>
</span> </span>
</TagType> </TagType>
); );

8
core/src/components/item/item.tsx
View File

@ -128,12 +128,12 @@ export class Item {
{...attrs} {...attrs}
class={themedClasses} class={themedClasses}
onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}> onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
<slot name='start'></slot> <slot name="start"></slot>
<div class='item-inner'> <div class="item-inner">
<div class='input-wrapper'> <div class="input-wrapper">
<slot></slot> <slot></slot>
</div> </div>
<slot name='end'></slot> <slot name="end"></slot>
</div> </div>
{ clickable && this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { clickable && this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</TagType> </TagType>

6
core/src/components/loading/loading.tsx
View File

@ -206,14 +206,14 @@ export class Loading implements OverlayInterface {
render() { render() {
return [ return [
<ion-backdrop visible={this.showBackdrop} tappable={false} />, <ion-backdrop visible={this.showBackdrop} tappable={false} />,
<div class='loading-wrapper' role='dialog'> <div class="loading-wrapper" role="dialog">
{ this.spinner !== 'hide' && { this.spinner !== 'hide' &&
<div class='loading-spinner'> <div class="loading-spinner">
<ion-spinner name={this.spinner}></ion-spinner> <ion-spinner name={this.spinner}></ion-spinner>
</div>} </div>}
{ this.content && <div class='loading-content'>{this.content}</div>} { this.content && <div class="loading-content">{this.content}</div>}
</div> </div>
]; ];
} }

2
core/src/components/menu-button/menu-button.tsx
View File

@ -40,7 +40,7 @@ export class MenuButton {
<ion-button> <ion-button>
{this.custom {this.custom
? <slot/> ? <slot/>
: <ion-icon slot='icon-only' name={menuIcon}/>} : <ion-icon slot="icon-only" name={menuIcon}/>}
</ion-button> </ion-button>
</ion-menu-toggle> </ion-menu-toggle>
); );

12
core/src/components/menu/menu.tsx
View File

@ -427,13 +427,13 @@ export class Menu {
render() { render() {
return ([ return ([
<div class='menu-inner' ref={el => this.menuInnerEl = el}> <div class="menu-inner" ref={el => this.menuInnerEl = el}>
<slot></slot> <slot></slot>
</div>, </div>,
<ion-backdrop <ion-backdrop
ref={el => this.backdropEl = el} ref={el => this.backdropEl = el}
class='menu-backdrop' class="menu-backdrop"
tappable={false} tappable={false}
stopPropagation={false}/>, stopPropagation={false}/>,
@ -444,12 +444,12 @@ export class Menu {
onMove={this.onDragMove.bind(this)} onMove={this.onDragMove.bind(this)}
onEnd={this.onDragEnd.bind(this)} onEnd={this.onDragEnd.bind(this)}
disabled={!this.isActive() || !this.swipeEnabled} disabled={!this.isActive() || !this.swipeEnabled}
gestureName='menu-swipe' gestureName="menu-swipe"
gesturePriority={10} gesturePriority={10}
type='pan' type="pan"
direction='x' direction="x"
threshold={10} threshold={10}
attachTo='window' attachTo="window"
disableScroll={true} /> disableScroll={true} />
]); ]);
} }

2
core/src/components/modal/modal.tsx
View File

@ -230,7 +230,7 @@ export class Modal implements OverlayInterface {
return [ return [
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>, <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
<div role='dialog' class={dialogClasses}></div> <div role="dialog" class={dialogClasses}></div>
]; ];
} }
} }

10
core/src/components/nav/nav.tsx
View File

@ -750,13 +750,13 @@ export class Nav implements NavOutlet {
onStart={this.swipeBackStart.bind(this)} onStart={this.swipeBackStart.bind(this)}
onMove={this.swipeBackProgress.bind(this)} onMove={this.swipeBackProgress.bind(this)}
onEnd={this.swipeBackEnd.bind(this)} onEnd={this.swipeBackEnd.bind(this)}
gestureName='goback-swipe' gestureName="goback-swipe"
gesturePriority={10} gesturePriority={10}
type='pan' type="pan"
direction='x' direction="x"
threshold={10} threshold={10}
attachTo='body'/>, attachTo="body"/>,
this.mode === 'ios' && <div class='nav-decor'/>, this.mode === 'ios' && <div class="nav-decor"/>,
<slot></slot> <slot></slot>
]; ];
} }

14
core/src/components/picker-column/picker-column.tsx
View File

@ -406,7 +406,7 @@ export class PickerColumnCmp {
if (col.prefix) { if (col.prefix) {
results.push( results.push(
<div class='picker-prefix' style={{width: col.prefixWidth!}}> <div class="picker-prefix" style={{width: col.prefixWidth!}}>
{col.prefix} {col.prefix}
</div> </div>
); );
@ -418,15 +418,15 @@ export class PickerColumnCmp {
onStart={this.onDragStart.bind(this)} onStart={this.onDragStart.bind(this)}
onMove={this.onDragMove.bind(this)} onMove={this.onDragMove.bind(this)}
onEnd={this.onDragEnd.bind(this)} onEnd={this.onDragEnd.bind(this)}
gestureName='picker-swipe' gestureName="picker-swipe"
gesturePriority={10} gesturePriority={10}
type='pan' type="pan"
direction='y' direction="y"
passive={false} passive={false}
threshold={0} threshold={0}
attachTo='parent' attachTo="parent"
></ion-gesture>, ></ion-gesture>,
<div class='picker-opts' style={{maxWidth: col.optionsWidth!}}> <div class="picker-opts" style={{maxWidth: col.optionsWidth!}}>
{options.map((o, index) => {options.map((o, index) =>
<button <button
class={{'picker-opt': true, 'picker-opt-disabled': !!o.disabled}} class={{'picker-opt': true, 'picker-opt-disabled': !!o.disabled}}
@ -440,7 +440,7 @@ export class PickerColumnCmp {
if (col.suffix) { if (col.suffix) {
results.push( results.push(
<div class='picker-suffix' style={{width: col.suffixWidth!}}> <div class="picker-suffix" style={{width: col.suffixWidth!}}>
{col.suffix} {col.suffix}
</div> </div>
); );

10
core/src/components/picker/picker.tsx
View File

@ -299,8 +299,8 @@ export class Picker implements OverlayInterface {
return [ return [
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>, <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
<div class='picker-wrapper' role='dialog'> <div class="picker-wrapper" role="dialog">
<div class='picker-toolbar'> <div class="picker-toolbar">
{buttons.map(b => {buttons.map(b =>
<div class={buttonWrapperClass(b)}> <div class={buttonWrapperClass(b)}>
<button onClick={() => this.buttonClick(b)} class={buttonClass(b)}> <button onClick={() => this.buttonClick(b)} class={buttonClass(b)}>
@ -309,12 +309,12 @@ export class Picker implements OverlayInterface {
</div> </div>
)} )}
</div> </div>
<div class='picker-columns'> <div class="picker-columns">
<div class='picker-above-highlight'></div> <div class="picker-above-highlight"></div>
{columns.map(c => {columns.map(c =>
<ion-picker-column col={c}></ion-picker-column> <ion-picker-column col={c}></ion-picker-column>
)} )}
<div class='picker-below-highlight'></div> <div class="picker-below-highlight"></div>
</div> </div>
</div> </div>
]; ];

4
core/src/components/popover/popover.tsx
View File

@ -246,8 +246,8 @@ export class Popover implements OverlayInterface {
return [ return [
<ion-backdrop tappable={this.enableBackdropDismiss}/>, <ion-backdrop tappable={this.enableBackdropDismiss}/>,
<div class={wrapperClasses}> <div class={wrapperClasses}>
<div class='popover-arrow'></div> <div class="popover-arrow"></div>
<div class='popover-content'></div> <div class="popover-content"></div>
</div> </div>
]; ];
} }

4
core/src/components/radio/radio.tsx
View File

@ -189,10 +189,10 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
}; };
return [ return [
<div class={radioClasses}> <div class={radioClasses}>
<div class='radio-inner'/> <div class="radio-inner"/>
</div>, </div>,
<input <input
type='radio' type="radio"
onClick={this.onClick.bind(this)} onClick={this.onClick.bind(this)}
onChange={this.onChange.bind(this)} onChange={this.onChange.bind(this)}
onFocus={this.onFocus.bind(this)} onFocus={this.onFocus.bind(this)}

6
core/src/components/range-knob/range-knob.tsx
View File

@ -59,11 +59,11 @@ export class RangeKnob {
render() { render() {
if (this.pin) { if (this.pin) {
return [ return [
<div class='range-pin' role='presentation'>{this.val}</div>, <div class="range-pin" role="presentation">{this.val}</div>,
<div class='range-knob' role='presentation' /> <div class="range-knob" role="presentation" />
]; ];
} }
return <div class='range-knob' role='presentation' />; return <div class="range-knob" role="presentation" />;
} }
} }

28
core/src/components/range/range.tsx
View File

@ -414,40 +414,40 @@ export class Range implements BaseInput {
render() { render() {
return [ return [
<slot name='start'></slot>, <slot name="start"></slot>,
<ion-gesture <ion-gesture
disableScroll={true} disableScroll={true}
onStart={this.onDragStart.bind(this)} onStart={this.onDragStart.bind(this)}
onMove={this.onDragMove.bind(this)} onMove={this.onDragMove.bind(this)}
onEnd={this.onDragEnd.bind(this)} onEnd={this.onDragEnd.bind(this)}
disabled={this.disabled} disabled={this.disabled}
gestureName='range' gestureName="range"
gesturePriority={30} gesturePriority={30}
type='pan' type="pan"
direction='x' direction="x"
threshold={0}> threshold={0}>
<div class='range-slider'> <div class="range-slider">
{this.ticks.map(t => {this.ticks.map(t =>
<div <div
style={{ left: t.left! }} style={{ left: t.left! }}
role='presentation' role="presentation"
class={{ 'range-tick': true, 'range-tick-active': !!t.active }} class={{ 'range-tick': true, 'range-tick-active': !!t.active }}
/> />
)} )}
<div class='range-bar' role='presentation' /> <div class="range-bar" role="presentation" />
<div <div
class='range-bar range-bar-active' class="range-bar range-bar-active"
role='presentation' role="presentation"
style={{ style={{
left: this.barL, left: this.barL,
right: this.barR right: this.barR
}} }}
/> />
<ion-range-knob <ion-range-knob
class='range-knob-handle' class="range-knob-handle"
knob='knobA' knob="knobA"
pressed={this.pressedA} pressed={this.pressedA}
ratio={this.ratioA} ratio={this.ratioA}
val={this.valA} val={this.valA}
@ -458,8 +458,8 @@ export class Range implements BaseInput {
{this.dualKnobs {this.dualKnobs
? <ion-range-knob ? <ion-range-knob
class='range-knob-handle' class="range-knob-handle"
knob='knobB' knob="knobB"
pressed={this.pressedB} pressed={this.pressedB}
ratio={this.ratioB} ratio={this.ratioB}
val={this.valB} val={this.valB}
@ -470,7 +470,7 @@ export class Range implements BaseInput {
: null} : null}
</div> </div>
</ion-gesture>, </ion-gesture>,
<slot name='end'></slot> <slot name="end"></slot>
]; ];
} }
} }

12
core/src/components/refresher-content/refresher-content.tsx
View File

@ -40,24 +40,24 @@ export class RefresherContent {
protected render() { protected render() {
return [ return [
<div class='refresher-pulling'> <div class="refresher-pulling">
{this.pullingIcon && {this.pullingIcon &&
<div class='refresher-pulling-icon'> <div class="refresher-pulling-icon">
<ion-icon name={this.pullingIcon}></ion-icon> <ion-icon name={this.pullingIcon}></ion-icon>
</div> </div>
} }
{this.pullingText && {this.pullingText &&
<div class='refresher-pulling-text' innerHTML={this.pullingText}></div> <div class="refresher-pulling-text" innerHTML={this.pullingText}></div>
} }
</div>, </div>,
<div class='refresher-refreshing'> <div class="refresher-refreshing">
{this.refreshingSpinner && {this.refreshingSpinner &&
<div class='refresher-refreshing-icon'> <div class="refresher-refreshing-icon">
<ion-spinner name={this.refreshingSpinner}></ion-spinner> <ion-spinner name={this.refreshingSpinner}></ion-spinner>
</div> </div>
} }
{this.refreshingText && {this.refreshingText &&
<div class='refresher-refreshing-text' innerHTML={this.refreshingText}></div> <div class="refresher-refreshing-text" innerHTML={this.refreshingText}></div>
} }
</div> </div>
]; ];

2
core/src/components/reorder/reorder.tsx
View File

@ -34,7 +34,7 @@ export class Reorder {
render() { render() {
return (this.custom) return (this.custom)
? <slot/> ? <slot/>
: <ion-icon class='reorder-icon' name='reorder'/>; : <ion-icon class="reorder-icon" name="reorder"/>;
} }
} }

2
core/src/components/router-outlet/route-outlet.tsx
View File

@ -131,7 +131,7 @@ export class RouterOutlet implements NavOutlet {
render() { render() {
return [ return [
this.mode === 'ios' && <div class='nav-decor'/>, this.mode === 'ios' && <div class="nav-decor"/>,
<slot/> <slot/>
]; ];
} }

2
core/src/components/scroll/scroll.tsx
View File

@ -253,7 +253,7 @@ export class Scroll {
render() { render() {
return [ return [
// scroll-inner is used to keep custom user padding // scroll-inner is used to keep custom user padding
<div class='scroll-inner'> <div class="scroll-inner">
<slot></slot> <slot></slot>
</div> </div>
]; ];

12
core/src/components/searchbar/searchbar.tsx
View File

@ -324,23 +324,23 @@ export class Searchbar {
const cancelButton = const cancelButton =
this.showCancelButton this.showCancelButton
? <button ? <button
type='button' type="button"
tabindex={this.mode === 'ios' && !this.activated ? -1 : undefined} tabindex={this.mode === 'ios' && !this.activated ? -1 : undefined}
onClick={this.cancelSearchbar.bind(this)} onClick={this.cancelSearchbar.bind(this)}
onMouseDown={this.cancelSearchbar.bind(this)} onMouseDown={this.cancelSearchbar.bind(this)}
class={cancelButtonClasses}> class={cancelButtonClasses}>
{ this.mode === 'md' { this.mode === 'md'
? <ion-icon name='md-arrow-back'></ion-icon> ? <ion-icon name="md-arrow-back"></ion-icon>
: this.cancelButtonText } : this.cancelButtonText }
</button> </button>
: null; : null;
const searchbar: JSX.Element[] = [ const searchbar: JSX.Element[] = [
<div class='searchbar-input-container'> <div class="searchbar-input-container">
{ this.mode === 'md' ? cancelButton : null } { this.mode === 'md' ? cancelButton : null }
<div class={searchIconClasses}></div> <div class={searchIconClasses}></div>
<input <input
class='searchbar-input' class="searchbar-input"
onInput={this.inputChanged.bind(this)} onInput={this.inputChanged.bind(this)}
onBlur={this.inputBlurred.bind(this)} onBlur={this.inputBlurred.bind(this)}
onFocus={this.inputFocused.bind(this)} onFocus={this.inputFocused.bind(this)}
@ -351,8 +351,8 @@ export class Searchbar {
autoCorrect={this.autocorrect} autoCorrect={this.autocorrect}
spellCheck={this.spellcheck}/> spellCheck={this.spellcheck}/>
<button <button
type='button' type="button"
class='searchbar-clear-icon' class="searchbar-clear-icon"
onClick={this.clearInput.bind(this)} onClick={this.clearInput.bind(this)}
onMouseDown={this.clearInput.bind(this)}> onMouseDown={this.clearInput.bind(this)}>
</button> </button>

18
core/src/components/select/select.tsx
View File

@ -484,17 +484,17 @@ export class Select {
return [ return [
<div <div
role='textbox' role="textbox"
aria-multiline='false' aria-multiline="false"
class={ selectTextClasses }>{ selectText } class={ selectTextClasses }>{ selectText }
</div>, </div>,
<div class='select-icon' role='presentation'> <div class="select-icon" role="presentation">
<div class='select-icon-inner'></div> <div class="select-icon-inner"></div>
</div>, </div>,
<button <button
type='button' type="button"
role='combobox' role="combobox"
aria-haspopup='dialog' aria-haspopup="dialog"
aria-expanded={this.isExpanded} aria-expanded={this.isExpanded}
aria-labelledby={this.labelId} aria-labelledby={this.labelId}
aria-disabled={this.disabled ? 'true' : false} aria-disabled={this.disabled ? 'true' : false}
@ -502,11 +502,11 @@ export class Select {
onKeyUp={this.onKeyUp.bind(this)} onKeyUp={this.onKeyUp.bind(this)}
onFocus={this.onFocus.bind(this)} onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)} onBlur={this.onBlur.bind(this)}
class='select-cover'> class="select-cover">
<slot></slot> <slot></slot>
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</button>, </button>,
<input type='hidden' name={this.name} value={parseValue(this.value)}/> <input type="hidden" name={this.name} value={parseValue(this.value)}/>
]; ];
} }
} }

4
core/src/components/slides/slides.tsx
View File

@ -380,8 +380,8 @@ export class Slides {
render() { render() {
return ( return (
<div class='swiper-container' data-dir='rtl'> <div class="swiper-container" data-dir="rtl">
<div class='swiper-wrapper'> <div class="swiper-wrapper">
<slot /> <slot />
</div> </div>
<div <div

8
core/src/components/spinner/spinner.tsx
View File

@ -114,8 +114,8 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
data.style.animationDuration = duration + 'ms'; data.style.animationDuration = duration + 'ms';
return ( return (
<svg viewBox='0 0 64 64' style={data.style}> <svg viewBox="0 0 64 64" style={data.style}>
<circle transform='translate(32,32)' r={data.r}></circle> <circle transform="translate(32,32)" r={data.r}></circle>
</svg> </svg>
); );
} }
@ -126,8 +126,8 @@ function buildLine(spinner: SpinnerConfig, duration: number, index: number, tota
data.style.animationDuration = duration + 'ms'; data.style.animationDuration = duration + 'ms';
return ( return (
<svg viewBox='0 0 64 64' style={data.style}> <svg viewBox="0 0 64 64" style={data.style}>
<line transform='translate(32,32)' y1={data.y1} y2={data.y2}></line> <line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
</svg> </svg>
); );
} }

8
core/src/components/tab-button/tab-button.tsx
View File

@ -82,12 +82,12 @@ export class TabButton {
return [ return [
<a <a
href={href} href={href}
class='tab-cover' class="tab-cover"
onKeyUp={this.onKeyUp.bind(this)} onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)}> onBlur={this.onBlur.bind(this)}>
{ tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> } { tab.icon && <ion-icon class="tab-button-icon" name={tab.icon}></ion-icon> }
{ tab.label && <span class='tab-button-text'>{tab.label}</span> } { tab.label && <span class="tab-button-text">{tab.label}</span> }
{ tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> } { tab.badge && <ion-badge class="tab-badge" color={tab.badgeStyle}>{tab.badge}</ion-badge> }
{ this.mode === 'md' && <ion-ripple-effect tapClick={true}/> } { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
</a> </a>
]; ];

17
core/src/components/tabbar/tabbar.tsx
View File

@ -2,6 +2,9 @@ import { Component, Element, Listen, Prop, State, Watch } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme'; import { createThemedClasses } from '../../utils/theme';
import { Mode, QueueController } from '../../index'; import { Mode, QueueController } from '../../index';
export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
export type TabbarPlacement = 'top' | 'bottom';
@Component({ @Component({
tag: 'ion-tabbar', tag: 'ion-tabbar',
styleUrls: { styleUrls: {
@ -28,7 +31,8 @@ export class Tabbar {
@State() canScrollRight = false; @State() canScrollRight = false;
@State() hidden = false; @State() hidden = false;
@Prop() placement = 'bottom'; @Prop() layout: TabbarLayout = 'icon-top';
@Prop() placement: TabbarPlacement = 'bottom';
@Prop() selectedTab?: HTMLIonTabElement; @Prop() selectedTab?: HTMLIonTabElement;
@Prop() scrollable = false; @Prop() scrollable = false;
@Prop() tabs: HTMLIonTabElement[] = []; @Prop() tabs: HTMLIonTabElement[] = [];
@ -39,7 +43,6 @@ export class Tabbar {
this.highlight && this.updateHighlight(); this.highlight && this.updateHighlight();
} }
@Prop() layout = 'icon-top';
@Prop() highlight = false; @Prop() highlight = false;
/** /**
@ -181,14 +184,14 @@ export class Tabbar {
render() { render() {
const selectedTab = this.selectedTab; const selectedTab = this.selectedTab;
const ionTabbarHighlight = this.highlight ? <div class='animated tabbar-highlight'/> as HTMLElement : null; const ionTabbarHighlight = this.highlight ? <div class="animated tabbar-highlight"/> as HTMLElement : null;
const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button'); const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button');
const tabButtons = this.tabs.map(tab => <ion-tab-button class={buttonClasses} tab={tab} selected={selectedTab === tab}/>); const tabButtons = this.tabs.map(tab => <ion-tab-button class={buttonClasses} tab={tab} selected={selectedTab === tab}/>);
if (this.scrollable) { if (this.scrollable) {
return [ return [
<ion-button onClick={() => this.scrollByTab('left')} fill='clear' class={{inactive: !this.canScrollLeft}}> <ion-button onClick={() => this.scrollByTab('left')} fill="clear" class={{inactive: !this.canScrollLeft}}>
<ion-icon name='arrow-dropleft'/> <ion-icon name="arrow-dropleft"/>
</ion-button>, </ion-button>,
<ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}> <ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}>
@ -196,8 +199,8 @@ export class Tabbar {
{ionTabbarHighlight} {ionTabbarHighlight}
</ion-scroll>, </ion-scroll>,
<ion-button onClick={() => this.scrollByTab('right')} fill='clear' class={{inactive: !this.canScrollRight}}> <ion-button onClick={() => this.scrollByTab('right')} fill="clear" class={{inactive: !this.canScrollRight}}>
<ion-icon name='arrow-dropright'/> <ion-icon name="arrow-dropright"/>
</ion-button> </ion-button>
]; ];
} else { } else {

13
core/src/components/tabs/tabs.tsx
View File

@ -1,6 +1,7 @@
import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
import { Config, NavOutlet } from '../../index'; import { Config, NavOutlet } from '../../index';
import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces'; import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
import { TabbarLayout, TabbarPlacement } from '../tabbar/tabbar';
@Component({ @Component({
@ -42,12 +43,12 @@ export class Tabs implements NavOutlet {
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/ */
@Prop({ mutable: true }) tabbarLayout?: string; @Prop({ mutable: true }) tabbarLayout?: TabbarLayout;
/** /**
* Set position of the tabbar: `top`, `bottom`. * Set position of the tabbar: `top`, `bottom`.
*/ */
@Prop({ mutable: true }) tabbarPlacement?: string; @Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement;
/** /**
* If true, show the tab highlight bar under the selected tab. * If true, show the tab highlight bar under the selected tab.
@ -78,9 +79,9 @@ export class Tabs implements NavOutlet {
this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]'); this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
} }
this.loadConfig('tabsPlacement', 'bottom'); this.loadConfig('tabbarLayout', 'bottom');
this.loadConfig('tabsLayout', 'icon-top'); this.loadConfig('tabbarLayout', 'icon-top');
this.loadConfig('tabsHighlight', true); this.loadConfig('tabbarHighlight', false);
} }
async componentDidLoad() { async componentDidLoad() {
@ -272,7 +273,7 @@ export class Tabs implements NavOutlet {
render() { render() {
const dom = [ const dom = [
<div class='tabs-inner'> <div class="tabs-inner">
<slot></slot> <slot></slot>
</div> </div>
]; ];

34
core/src/components/tabs/test/placements/e2e.js Normal file
View File

@ -0,0 +1,34 @@
// 'use strict';
// const { register, Page, platforms } = require('../../../../../scripts/e2e');
// const { getElement, waitAndGetElementById, waitForTransition } = require('../../../../../scripts/e2e/utils');
// class E2ETestPage extends Page {
// constructor(driver, platform) {
// super(driver, `http://localhost:3333/src/components/tabs/test/basic?ionicplatform=${platform}`);
// }
// }
// platforms.forEach(platform => {
// describe('tabs/basic', () => {
// register('should init', driver => {
// const page = new E2ETestPage(driver, platform);
// return page.navigate();
// });
// register('should check each tab', async (driver, testContext) => {
// testContext.timeout(60000);
// const page = new E2ETestPage(driver, platform);
// await waitForTransition(300);
// const tabTwoButton = await waitAndGetElementById(driver, 'tab-t-0-1');
// tabTwoButton.click();
// await waitForTransition(600);
// const tabThreeButton = await waitAndGetElementById(driver, 'tab-t-0-2');
// tabThreeButton.click();
// await waitForTransition(600);
// });
// });
// });

56
core/src/components/tabs/test/placements/index.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Tab - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-tabs tabbar-placement="top">
<ion-tab icon="star">
<ion-header>
<ion-toolbar>
<ion-title>Tab One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab One
</ion-content>
</ion-tab>
<ion-tab icon="globe">
<ion-header>
<ion-toolbar>
<ion-title>Tab Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Two
</ion-content>
</ion-tab>
<ion-tab icon="logo-facebook">
<ion-header>
<ion-toolbar>
<ion-title>Tab Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Tab Three
</ion-content>
</ion-tab>
<ion-tab disabled icon="chatboxes" component="page-one"></ion-tab>
</ion-tabs>
</ion-app>
</body>
</html>

11
core/src/components/tabs/test/placements/readme.md Normal file
View File

@ -0,0 +1,11 @@
# page-tab
<!-- Auto Generated Below -->
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

16
core/src/components/tabs/test/translucent/translucent-page-tab.tsx
View File

@ -45,14 +45,14 @@ export class TranslucentPageTab {
<ion-content fullscreen={true}> <ion-content fullscreen={true}>
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col col-6><f class='red'></f></ion-col> <ion-col col-6><f class="red"></f></ion-col>
<ion-col col-6><f class='green'></f></ion-col> <ion-col col-6><f class="green"></f></ion-col>
<ion-col col-6><f class='blue'></f></ion-col> <ion-col col-6><f class="blue"></f></ion-col>
<ion-col col-6><f class='yellow'></f></ion-col> <ion-col col-6><f class="yellow"></f></ion-col>
<ion-col col-6><f class='pink'></f></ion-col> <ion-col col-6><f class="pink"></f></ion-col>
<ion-col col-6><f class='purple'></f></ion-col> <ion-col col-6><f class="purple"></f></ion-col>
<ion-col col-6><f class='black'></f></ion-col> <ion-col col-6><f class="black"></f></ion-col>
<ion-col col-6><f class='orange'></f></ion-col> <ion-col col-6><f class="orange"></f></ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>

6
core/src/components/toast/toast.tsx
View File

@ -203,12 +203,12 @@ export class Toast implements OverlayInterface {
}; };
return ( return (
<div class={wrapperClass}> <div class={wrapperClass}>
<div class='toast-container'> <div class="toast-container">
{this.message {this.message
? <div class='toast-message'>{this.message}</div> ? <div class="toast-message">{this.message}</div>
: null} : null}
{this.showCloseButton {this.showCloseButton
? <ion-button fill='clear' color='light' class='toast-button' onClick={() => this.dismiss()}> ? <ion-button fill="clear" color="light" class="toast-button" onClick={() => this.dismiss()}>
{this.closeButtonText || 'Close'} {this.closeButtonText || 'Close'}
</ion-button> </ion-button>
: null} : null}

8
core/src/components/toggle/toggle.tsx
View File

@ -192,13 +192,13 @@ export class Toggle implements CheckboxInput {
return [ return [
<ion-gesture {...this.gestureConfig} <ion-gesture {...this.gestureConfig}
disabled={this.disabled} tabIndex={-1}> disabled={this.disabled} tabIndex={-1}>
<div class='toggle-icon'> <div class="toggle-icon">
<div class='toggle-inner'/> <div class="toggle-inner"/>
</div> </div>
<div class='toggle-cover'/> <div class="toggle-cover"/>
</ion-gesture>, </ion-gesture>,
<input <input
type='checkbox' type="checkbox"
onChange={this.onChange.bind(this)} onChange={this.onChange.bind(this)}
onFocus={this.onFocus.bind(this)} onFocus={this.onFocus.bind(this)}
onBlur={this.onBlur.bind(this)} onBlur={this.onBlur.bind(this)}

8
core/src/components/toolbar/toolbar.tsx
View File

@ -53,13 +53,13 @@ export class Toolbar {
return [ return [
<div class={backgroundCss}></div>, <div class={backgroundCss}></div>,
<slot name='start'></slot>, <slot name="start"></slot>,
<slot name='secondary'></slot>, <slot name="secondary"></slot>,
<div class={contentCss}> <div class={contentCss}>
<slot></slot> <slot></slot>
</div>, </div>,
<slot name='primary'></slot>, <slot name="primary"></slot>,
<slot name='end'></slot> <slot name="end"></slot>
]; ];
} }
} }