fix(fab-button): sets pointer-events none when disabled

relates to #15129
fixes #15120
This commit is contained in:
Manu Mtz.-Almeida
2018-08-10 20:12:58 +02:00
parent b70bb70991
commit 04d33e5630
3 changed files with 7 additions and 1 deletions

View File

@ -15,6 +15,8 @@
--padding-top: calc((#{$fab-size} - var(--size)) / 2);
--padding-bottom: calc((#{$fab-size} - var(--size)) / 2);
display: block;
color: #{current-color(contrast)};
font-size: 14px;
@ -27,6 +29,9 @@
font-kerning: none;
}
:host(.fab-button-disabled) {
pointer-events: none;
}
:host(.activated) {
--background: #{current-color(tint)};

View File

@ -81,6 +81,7 @@ export class FabButton {
class: {
...createColorClasses(this.color),
...this.getFabClassMap(),
'fab-button-disabled': this.disabled,
'fab-button-translucent': this.translucent
}
};

View File

@ -24,7 +24,7 @@
<pre id="log" style="right:10px; bottom:50px; text-shadow: 0 0 2px rgba(0, 0, 0, 0.24);" slot="fixed">log</pre>
<ion-button>Test</ion-button>
<ion-fab-button disabled>FAB</ion-fab-button>
<ion-fab-button disabled onclick="throw 'no clickable'">FAB</ion-fab-button>
<ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">