fix(item): sliding item's width must be 100%

#closes 6239
This commit is contained in:
Manu Mtz.-Almeida
2016-06-15 03:18:54 +02:00
parent 461ba11de9
commit efcdd20508
3 changed files with 93 additions and 0 deletions

View File

@ -8,6 +8,8 @@ ion-item-sliding {
position: relative;
display: block;
overflow: hidden;
width: 100%;
.item {
position: static;

View File

@ -0,0 +1,58 @@
import {Component, ViewChild, ElementRef} from '@angular/core';
import {ionicBootstrap, Platform} from '../../../../../src';
@Component({
templateUrl: 'main.html'
})
class E2EPage {
items: any[] = [];
webview: string;
@ViewChild('content') content: ElementRef;
constructor(platform: Platform) {
for (var i = 0; i < 200; i++) {
this.items.push({
value: i,
someMethod: function() {
return '!!';
}
});
}
if (platform.is('ios')) {
if (window.indexedDB) {
this.webview = ': WKWebView';
} else {
this.webview = ': UIWebView';
}
}
}
headerFn(record: any, index: number, records: any[]) {
if (index % 4 === 0) {
return index + ' is divisible by 4';
}
return null;
}
reload() {
window.location.reload(true);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root = E2EPage;
}
ionicBootstrap(E2EApp, null, {
prodMode: true
});

View File

@ -0,0 +1,33 @@
<ion-navbar *navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end>
<button (click)="reload()">
Reload
</button>
</ion-buttons>
</ion-navbar>
<ion-content>
<ion-list [virtualScroll]="items"
[headerFn]="headerFn">
<ion-item-divider *virtualHeader="let header">
Header: {{header}}
</ion-item-divider>
<ion-item-sliding *virtualItem="let item">
<ion-item>Item: {{item.value}} {{item.someMethod()}}</ion-item>
<ion-item-options>
<button>Archive</button>
</ion-item-options>
<ion-item-options side="left">
<button danger>Remove</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>