Skip to content
Permalink
Browse files

fix(item-option): styling and behaviour for disabled item-option (#17909

)

fixes #17905
  • Loading branch information...
kelvindart authored and liamdebeasi committed Mar 28, 2019
1 parent 51614c1 commit 346ecb2a3c9ab75affbc4239fa8b6bdd0c625093
@@ -112,3 +112,17 @@
transition-property: none;
transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}


// Item Disabled Styling
// --------------------------------------------------

:host(.item-option-disabled) {
pointer-events: none;
}

:host(.item-option-disabled) .button-native {
cursor: default;
opacity: .5;
pointer-events: none;
}
@@ -60,10 +60,12 @@ export class ItemOption implements ComponentInterface {
}

hostData() {
const { disabled, expandable } = this;
return {
class: {
...createColorClasses(this.color),
'item-option-expandable': this.expandable,
'item-option-disabled': disabled,
'item-option-expandable': expandable,
'ion-activatable': true,
}
};
@@ -120,6 +120,30 @@ <h2>HubStruck Notifications</h2>

</ion-item-sliding>

<ion-item-sliding id="item100">
<ion-item href="#">
<ion-label>
<h2>Disabled Buttons</h2>
<p>Buttons should not be clickable</p>
</ion-label>
</ion-item>

<ion-item-options side="start">
<ion-item-option disabled>
Disabled
</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option color="danger" disabled>
<ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-item-option>
<ion-item-option disabled>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-item-option>
</ion-item-options>

</ion-item-sliding>

<ion-item-sliding id="item0">
<ion-item onclick="clickedItem('item0')">
<ion-label text-wrap>
@@ -189,7 +189,7 @@
<ion-item-sliding>
<ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
<ion-item-option disabled="true">More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>

0 comments on commit 346ecb2

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