add property "icon" to Message.vue to display a custom icon
parent
24f19057cf
commit
10f3139875
|
@ -36,7 +36,11 @@ export default {
|
||||||
life: {
|
life: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 3000
|
default: 3000
|
||||||
}
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
},
|
},
|
||||||
timeout: null,
|
timeout: null,
|
||||||
data() {
|
data() {
|
||||||
|
@ -62,7 +66,7 @@ export default {
|
||||||
return 'p-message p-component p-message-' + this.severity;
|
return 'p-message p-component p-message-' + this.severity;
|
||||||
},
|
},
|
||||||
iconClass() {
|
iconClass() {
|
||||||
return ['p-message-icon pi', {
|
return ['p-message-icon pi', this.icon ? this.icon : {
|
||||||
'pi-info-circle': this.severity === 'info',
|
'pi-info-circle': this.severity === 'info',
|
||||||
'pi-check': this.severity === 'success',
|
'pi-check': this.severity === 'success',
|
||||||
'pi-exclamation-triangle': this.severity === 'warn',
|
'pi-exclamation-triangle': this.severity === 'warn',
|
||||||
|
|
|
@ -16,6 +16,9 @@
|
||||||
<Message severity="warn">Warning Message Content</Message>
|
<Message severity="warn">Warning Message Content</Message>
|
||||||
<Message severity="error">Error Message Content</Message>
|
<Message severity="error">Error Message Content</Message>
|
||||||
|
|
||||||
|
<h5>Custom Icon</h5>
|
||||||
|
<Message severity="info" icon="pi-send">Info Message Content</Message>
|
||||||
|
|
||||||
<h5>Dynamic</h5>
|
<h5>Dynamic</h5>
|
||||||
<Button label="Show" @click="addMessages()" />
|
<Button label="Show" @click="addMessages()" />
|
||||||
<transition-group name="p-message" tag="div">
|
<transition-group name="p-message" tag="div">
|
||||||
|
|
|
@ -113,6 +113,12 @@ import InlineMessage from 'primevue/inlinemessage';
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>3000</td>
|
<td>3000</td>
|
||||||
<td>Delay in milliseconds to close the message automatically.</td>
|
<td>Delay in milliseconds to close the message automatically.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>icon</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Display a custom icon for the message.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue