Skip to content
Permalink
Browse files

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

…#17986)

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

* Fix padding issue

* add visibility hidden for item options
  • Loading branch information...
masimplo authored and liamdebeasi committed Apr 15, 2019
1 parent 983382c commit f13722cc206ce7f9661647c710fdc21e7c96eb72
@@ -77,6 +77,8 @@ ion-item-options {

ion-item-options {
display: flex;

visibility: hidden;
}

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

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

@include ltr() {
@@ -310,6 +310,44 @@ <h2>ion-item-sliding without options (no sliding)</h2>
</ion-item>
</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-label text-wrap>
<h2>Normal ion-item (no sliding)</h2>

0 comments on commit f13722c

Please sign in to comment.
You can’t perform that action at this time.