mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(item): sliding item's width must be 100%
#closes 6239
This commit is contained in:
@ -8,6 +8,8 @@ ion-item-sliding {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
position: static;
|
||||
|
58
src/components/virtual-scroll/test/sliding-item/index.ts
Normal file
58
src/components/virtual-scroll/test/sliding-item/index.ts
Normal 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
|
||||
});
|
33
src/components/virtual-scroll/test/sliding-item/main.html
Normal file
33
src/components/virtual-scroll/test/sliding-item/main.html
Normal 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>
|
Reference in New Issue
Block a user