javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-sliding): hide opposite side options when other side is open (#17986)

Browse Source 
* fix(item-sliding): hide opposite side options

* Fix padding issue

* add visibility hidden for item options
This commit is contained in:
Michael Asimakopoulos
2019-04-16 00:20:15 +03:00
committed by Liam DeBeasi
parent 983382c327
commit f13722cc20
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/item-options/item-options.scss
View File

@ -77,6 +77,8 @@ ion-item-options {
ion-item-options { ion-item-options {
display: flex; display: flex;
visibility: hidden;
} }
&.item-sliding-active-options-start .item-options-start, &.item-sliding-active-options-start .item-options-start,

4
core/src/components/item-sliding/item-sliding.scss
View File

@ -33,7 +33,7 @@ ion-item-sliding .item {
.item-sliding-active-swipe-end .item-options-end .item-option-expandable { .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
@include multi-dir() { @include multi-dir() {
/* stylelint-disable-next-line property-blacklist */ /* stylelint-disable-next-line property-blacklist */
padding-left: 90%; padding-left: 100%;
} }
@include ltr() { @include ltr() {
@ -51,7 +51,7 @@ ion-item-sliding .item {
.item-sliding-active-swipe-start .item-options-start .item-option-expandable { .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
@include multi-dir() { @include multi-dir() {
/* stylelint-disable-next-line property-blacklist */ /* stylelint-disable-next-line property-blacklist */
padding-right: 90%; padding-right: 100%;
} }
@include ltr() { @include ltr() {

38
core/src/components/item-sliding/test/basic/index.html
View File

@ -310,6 +310,44 @@
</ion-item> </ion-item>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding id="item10">
<ion-item detail>
<ion-label text-wrap>
<h2>RIGHT/LEFT side - many buttons</h2>
<p>Use mobile emulator to check</p>
</ion-label>
</ion-item>
<ion-item-options side="start" class="sliding-enabled">
<ion-item-option color="primary" expandable>
<ion-icon name="ios-checkmark"></ion-icon>Btn 1
</ion-item-option>
<ion-item-option color="secondary" expandable>
<ion-icon name="ios-checkmark"></ion-icon>Btn 2
</ion-item-option>
<ion-item-option color="danger" expandable>
<ion-icon name="ios-checkmark"></ion-icon>Btn 3
</ion-item-option>
<ion-item-option color="tertiary" expandable>
<ion-icon name="ios-checkmark"></ion-icon>Btn 4
</ion-item-option>
</ion-item-options>
<ion-item-options side="end" class="sliding-enabled">
<ion-item-option color="primary" expandable>
<ion-icon name="mail"></ion-icon>Btn 5
</ion-item-option>
<ion-item-option color="secondary" expandable>
<ion-icon name="mail"></ion-icon>Btn 6
</ion-item-option>
<ion-item-option color="danger" expandable>
<ion-icon name="mail"></ion-icon>Btn 7
</ion-item-option>
<ion-item-option color="tertiary" expandable>
<ion-icon name="mail"></ion-icon>Btn 8
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item> <ion-item>
<ion-label text-wrap> <ion-label text-wrap>
<h2>Normal ion-item (no sliding)</h2> <h2>Normal ion-item (no sliding)</h2>