Fixed #1495 - Change button/maskClassName properties with button/maskClass properties on SpeedDial
parent
a6f05052db
commit
2b3e461811
|
@ -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."
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue