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): add styles for disabled

Browse Source 
fixes #14867
This commit is contained in:
Manu Mtz.-Almeida
2018-07-28 17:45:45 +02:00
parent 7a0545d477
commit 520da8d373
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@
font-size: 14px; font-size: 14px;
} }
:host(.activated) { :host(.activated) {
--background: #{current-color(tint)}; --background: #{current-color(tint)};
} }
@ -40,6 +41,8 @@
border: 0; border: 0;
outline: none;
background: var(--background); background: var(--background);
background-clip: padding-box; background-clip: padding-box;
color: inherit; color: inherit;
@ -63,11 +66,12 @@
z-index: 0; z-index: 0;
font-kerning: none; font-kerning: none;
appearance: none; appearance: none;
}
&:active, .fab-button-native[disabled] {
&:focus { cursor: default;
outline: none; opacity: .5;
} pointer-events: none;
} }
::slotted(ion-icon) { ::slotted(ion-icon) {

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

@ -76,7 +76,7 @@ export class FabButton {
hostData() { hostData() {
return { return {
'tappable': true, 'tappable': !this.disabled,
class: { class: {
...createColorClasses(this.color), ...createColorClasses(this.color),
...this.getFabClassMap(), ...this.getFabClassMap(),

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>FAB</ion-fab-button> <ion-fab-button disabled>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">