Merge pull request #1722 from Rakasch/message_custom_icon
add property "icon" to Message.vue to display a custom iconpull/1280/head^2
commit
7a1a4a05d9
|
@ -36,7 +36,11 @@ export default {
|
|||
life: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
timeout: null,
|
||||
data() {
|
||||
|
@ -62,7 +66,7 @@ export default {
|
|||
return 'p-message p-component p-message-' + this.severity;
|
||||
},
|
||||
iconClass() {
|
||||
return ['p-message-icon pi', {
|
||||
return ['p-message-icon pi', this.icon ? this.icon : {
|
||||
'pi-info-circle': this.severity === 'info',
|
||||
'pi-check': this.severity === 'success',
|
||||
'pi-exclamation-triangle': this.severity === 'warn',
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<Message severity="warn">Warning 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>
|
||||
<Button label="Show" @click="addMessages()" />
|
||||
<transition-group name="p-message" tag="div">
|
||||
|
|
|
@ -113,6 +113,12 @@ import InlineMessage from 'primevue/inlinemessage';
|
|||
<td>number</td>
|
||||
<td>3000</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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
@ -516,4 +522,4 @@ button.p-button {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue