Fixed #1495 - Change button/maskClassName properties with button/maskClass properties on SpeedDial

pull/1533/head
mertsincan 2021-09-01 10:43:29 +03:00
parent a6f05052db
commit 2b3e461811
4 changed files with 14 additions and 14 deletions

View File

@ -54,13 +54,13 @@ const SpeedDialProps = [
description: "Whether the actions close when clicked outside."
},
{
name: "buttonClassName",
name: "buttonClass",
type: "string",
default: "null",
description: "Style class of the button element."
},
{
name: "maskClassName",
name: "maskClass",
type: "string",
default: "null",
description: "Style class of the mask element."

View File

@ -10,9 +10,9 @@ interface SpeedDialProps {
mask?: boolean;
disabled?: boolean;
hideOnClickOutside?: boolean;
buttonClassName?: string;
buttonClass?: string;
maskStyle?: string;
maskClassName?: string;
maskClass?: string;
showIcon?: string;
hideIcon?: string;
rotateAnimation?: boolean;

View File

@ -1,7 +1,7 @@
<template>
<div :ref="containerRef" :class="containerClass" :style="style">
<slot name="button" :toggle="onClick">
<SDButton type="button" :class="buttonClass" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
<SDButton type="button" :class="buttonClassName" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
</slot>
<ul :ref="listRef" class="p-speeddial-list" role="menu">
<li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
@ -16,7 +16,7 @@
</ul>
</div>
<template v-if="mask">
<div :class="maskClass" :style="maskStyle"></div>
<div :class="maskClassName" :style="maskStyle"></div>
</template>
</template>
@ -61,9 +61,9 @@ export default {
type: Boolean,
default: true
},
buttonClassName: null,
buttonClass: null,
maskStyle: null,
maskClassName: null,
maskClass: null,
showIcon: {
type: String,
default: 'pi pi-plus'
@ -243,18 +243,18 @@ export default {
'p-disabled': this.disabled
}, this.class];
},
buttonClass() {
buttonClassName() {
return ['p-speeddial-button p-button-rounded', {
'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
}, this.buttonClassName];
}, this.buttonClass];
},
iconClassName() {
return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
},
maskClass() {
maskClassName() {
return ['p-speeddial-mask', {
'p-speeddial-mask-visible': this.d_visible
}, this.maskClassName];
}, this.maskClass];
}
},
components: {

View File

@ -132,13 +132,13 @@ items: [
<td>Whether the actions close when clicked outside.</td>
</tr>
<tr>
<td>buttonClassName</td>
<td>buttonClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the button element.</td>
</tr>
<tr>
<td>maskClassName</td>
<td>maskClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the mask element.</td>