mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(item): slide close on tap
This commit is contained in:
@ -88,8 +88,12 @@ export class ItemSliding {
|
||||
this.openAmount = 0;
|
||||
|
||||
// Enable it once, it'll get disabled on the next drag
|
||||
this.enableAnimation();
|
||||
el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
|
||||
raf(() => {
|
||||
this.enableAnimation();
|
||||
if(this.itemSlidingContent) {
|
||||
this.itemSlidingContent.style[CSS.transform] = 'translateX(0)';
|
||||
}
|
||||
});
|
||||
}
|
||||
open(amt) {
|
||||
let el = this.itemSlidingContent;
|
||||
@ -101,7 +105,7 @@ export class ItemSliding {
|
||||
el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
|
||||
}
|
||||
}
|
||||
get isOpen() {
|
||||
isOpen() {
|
||||
return this.openAmount > 0;
|
||||
}
|
||||
getOpenAmt() {
|
||||
@ -130,6 +134,12 @@ class ItemSlideGesture extends DragGesture {
|
||||
this.el = el;
|
||||
this.item = item;
|
||||
this.listen();
|
||||
|
||||
this.el.addEventListener('touchstart', (e) => {
|
||||
if(this.item.isOpen()) {
|
||||
this.item.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onDragStart(ev) {
|
||||
|
@ -213,13 +213,24 @@ button.item {
|
||||
.card {
|
||||
button[ion-item]:not([detail-none]),
|
||||
a[ion-item]:not([detail-none]),
|
||||
[detail-push] {
|
||||
[detail-push]:not(ion-item-sliding) {
|
||||
@include ios-detail-push-icon($item-ios-detail-push-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right ($item-ios-padding-right - 2) center;
|
||||
background-size: 14px 14px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
ion-item-sliding[detail-push] {
|
||||
|
||||
ion-item-sliding-content {
|
||||
@include ios-detail-push-icon($item-ios-detail-push-color);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right ($item-ios-padding-right - 2) center;
|
||||
background-size: 14px 14px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-item-sliding class="item-text-wrap">
|
||||
<ion-item-sliding class="item-text-wrap" detail-push>
|
||||
<h3>Max Lynch</h3>
|
||||
<p>
|
||||
Hey do you want to go to the game tonight?
|
||||
@ -12,7 +12,7 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding class="item-text-wrap">
|
||||
<ion-item-sliding class="item-text-wrap" detail-push>
|
||||
<h3>Adam Bradley</h3>
|
||||
<p>
|
||||
I think I figured out how to get more Mountain Dew
|
||||
@ -21,4 +21,14 @@
|
||||
<button primary>Archive</button>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding class="item-text-wrap" detail-push>
|
||||
<h3>Ben Sperry</h3>
|
||||
<p>
|
||||
I like paper
|
||||
</p>
|
||||
<ion-item-options>
|
||||
<button primary>Archive</button>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
|
Reference in New Issue
Block a user