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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/fab-button/fab-button.scss
View File

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

1
core/src/components/fab-button/fab-button.tsx
View File

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

2
core/src/components/fab/test/basic/index.html
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> <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-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 vertical="top" horizontal="end" edge id="fab1" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight"> <ion-fab-button onclick="clickMainFAB('fab1')" mini class="e2eFabTopRight">