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."
|
description: "Whether the actions close when clicked outside."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "buttonClassName",
|
name: "buttonClass",
|
||||||
type: "string",
|
type: "string",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Style class of the button element."
|
description: "Style class of the button element."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "maskClassName",
|
name: "maskClass",
|
||||||
type: "string",
|
type: "string",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Style class of the mask element."
|
description: "Style class of the mask element."
|
||||||
|
|
|
@ -10,9 +10,9 @@ interface SpeedDialProps {
|
||||||
mask?: boolean;
|
mask?: boolean;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
hideOnClickOutside?: boolean;
|
hideOnClickOutside?: boolean;
|
||||||
buttonClassName?: string;
|
buttonClass?: string;
|
||||||
maskStyle?: string;
|
maskStyle?: string;
|
||||||
maskClassName?: string;
|
maskClass?: string;
|
||||||
showIcon?: string;
|
showIcon?: string;
|
||||||
hideIcon?: string;
|
hideIcon?: string;
|
||||||
rotateAnimation?: boolean;
|
rotateAnimation?: boolean;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :ref="containerRef" :class="containerClass" :style="style">
|
<div :ref="containerRef" :class="containerClass" :style="style">
|
||||||
<slot name="button" :toggle="onClick">
|
<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>
|
</slot>
|
||||||
<ul :ref="listRef" class="p-speeddial-list" role="menu">
|
<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">
|
<li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="mask">
|
<template v-if="mask">
|
||||||
<div :class="maskClass" :style="maskStyle"></div>
|
<div :class="maskClassName" :style="maskStyle"></div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -61,9 +61,9 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
buttonClassName: null,
|
buttonClass: null,
|
||||||
maskStyle: null,
|
maskStyle: null,
|
||||||
maskClassName: null,
|
maskClass: null,
|
||||||
showIcon: {
|
showIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'pi pi-plus'
|
default: 'pi pi-plus'
|
||||||
|
@ -243,18 +243,18 @@ export default {
|
||||||
'p-disabled': this.disabled
|
'p-disabled': this.disabled
|
||||||
}, this.class];
|
}, this.class];
|
||||||
},
|
},
|
||||||
buttonClass() {
|
buttonClassName() {
|
||||||
return ['p-speeddial-button p-button-rounded', {
|
return ['p-speeddial-button p-button-rounded', {
|
||||||
'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
|
'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
|
||||||
}, this.buttonClassName];
|
}, this.buttonClass];
|
||||||
},
|
},
|
||||||
iconClassName() {
|
iconClassName() {
|
||||||
return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
|
return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
|
||||||
},
|
},
|
||||||
maskClass() {
|
maskClassName() {
|
||||||
return ['p-speeddial-mask', {
|
return ['p-speeddial-mask', {
|
||||||
'p-speeddial-mask-visible': this.d_visible
|
'p-speeddial-mask-visible': this.d_visible
|
||||||
}, this.maskClassName];
|
}, this.maskClass];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
|
@ -132,13 +132,13 @@ items: [
|
||||||
<td>Whether the actions close when clicked outside.</td>
|
<td>Whether the actions close when clicked outside.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>buttonClassName</td>
|
<td>buttonClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Style class of the button element.</td>
|
<td>Style class of the button element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>maskClassName</td>
|
<td>maskClass</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Style class of the mask element.</td>
|
<td>Style class of the mask element.</td>
|
||||||
|
|
Loading…
Reference in New Issue