javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): use slot attr instead of item, add correct classes

Browse Source
This commit is contained in:
Brandy Carney
2017-05-22 16:29:26 -04:00
parent 897ab203ab
commit 182ef15363
7 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
<ion-item> <ion-item>
<ion-label>Apple</ion-label> <ion-label>Apple</ion-label>
<ion-toggle item-start></ion-toggle> <ion-toggle slot="start"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>
@ -106,7 +106,7 @@
<ion-item> <ion-item>
<ion-label>Apple</ion-label> <ion-label>Apple</ion-label>
<ion-toggle item-start></ion-toggle> <ion-toggle slot="start"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>

2
src/components/app/test/gesture-collision/pages/page-two/page-two.html
View File

@ -76,7 +76,7 @@
<ion-item> <ion-item>
<ion-label>Apple</ion-label> <ion-label>Apple</ion-label>
<ion-toggle item-start></ion-toggle> <ion-toggle slot="start"></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>

4
src/components/item/item.ts
View File

@ -274,7 +274,7 @@ import { ItemReorder } from './item-reorder';
@Component({ @Component({
selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider', selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
template: template:
'<ng-content select="[item-start],[item-left],ion-checkbox:not([item-end]):not([item-right])"></ng-content>' + '<ng-content select="[slot=\'start\'],[item-start],[item-left],ion-checkbox:not([slot=\'end\']):not([item-end]):not([item-right])"></ng-content>' +
'<div class="item-inner">' + '<div class="item-inner">' +
'<div class="input-wrapper">' + '<div class="input-wrapper">' +
'<ng-content select="ion-label"></ng-content>' + '<ng-content select="ion-label"></ng-content>' +
@ -283,7 +283,7 @@ import { ItemReorder } from './item-reorder';
'</ion-label>' + '</ion-label>' +
'<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' + '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
'</div>' + '</div>' +
'<ng-content select="[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' + '<ng-content select="[slot=\'end\'],[item-end],[item-right],ion-radio,ion-toggle"></ng-content>' +
'<ion-reorder *ngIf="_hasReorder"></ion-reorder>' + '<ion-reorder *ngIf="_hasReorder"></ion-reorder>' +
'</div>' + '</div>' +
'<div class="button-effect"></div>', '<div class="button-effect"></div>',

2
src/components/item/test/inputs/pages/root-page/root-page.html
View File

@ -58,7 +58,7 @@
<ion-item> <ion-item>
<ion-label>Toggle (left)</ion-label> <ion-label>Toggle (left)</ion-label>
<ion-toggle [(ngModel)]="toggle" item-start [disabled]='disabled'></ion-toggle> <ion-toggle [(ngModel)]="toggle" slot="start" [disabled]='disabled'></ion-toggle>
</ion-item> </ion-item>
<ion-item> <ion-item>

3
src/components/toggle/toggle.scss
View File

@ -17,6 +17,9 @@ ion-toggle.upgraded {
ion-toggle ion-gesture { ion-toggle ion-gesture {
display: block; display: block;
visibility: inherit; visibility: inherit;
width: 100%;
height: 100%;
} }
.toggle-cover { .toggle-cover {

6
src/components/toggle/toggle.ts
View File

@ -105,13 +105,13 @@ export class Toggle implements BooleanInputComponent {
render() { render() {
return h(this, return h(this, Ionic.theme(this, 'toggle', {
h('ion-gesture', Ionic.theme(this, 'toggle', {
class: { class: {
'toggle-activated': this.activated, 'toggle-activated': this.activated,
'toggle-checked': this.checked, 'toggle-checked': this.checked,
'toggle-disabled': this.disabled, 'toggle-disabled': this.disabled,
}, },
}), h('ion-gesture', {
props: { props: {
'canStart': this.canStart.bind(this), 'canStart': this.canStart.bind(this),
'onStart': this.onDragStart.bind(this), 'onStart': this.onDragStart.bind(this),
@ -125,7 +125,7 @@ export class Toggle implements BooleanInputComponent {
'threshold': 20, 'threshold': 20,
'attachTo': 'parent' 'attachTo': 'parent'
} }
}), },
[ [
h('div.toggle-icon', h('div.toggle-icon',
h('div.toggle-inner') h('div.toggle-inner')

2
src/components/virtual-scroll/test/media/pages/root-page/root-page.html
View File

@ -15,7 +15,7 @@
<ion-item *virtualItem="let item" [ngClass]="item.class"> <ion-item *virtualItem="let item" [ngClass]="item.class">
<ion-label>{{item.type}}-{{item.value}}</ion-label> <ion-label>{{item.type}}-{{item.value}}</ion-label>
<ion-checkbox *ngIf="item.type === 'checkbox'" item-start></ion-checkbox> <ion-checkbox *ngIf="item.type === 'checkbox'" item-start></ion-checkbox>
<ion-toggle *ngIf="item.type === 'toggle'" item-start></ion-toggle> <ion-toggle *ngIf="item.type === 'toggle'" slot="start"></ion-toggle>
<ion-radio *ngIf="item.type === 'radio'" item-start></ion-radio> <ion-radio *ngIf="item.type === 'radio'" item-start></ion-radio>
<ion-range *ngIf="item.type === 'range'"></ion-range> <ion-range *ngIf="item.type === 'range'"></ion-range>
</ion-item> </ion-item>