Merge pull request #1722 from Rakasch/message_custom_icon

add property "icon" to Message.vue to display a custom icon
pull/1280/head^2
Cagatay Civici 2021-11-16 10:00:07 +03:00 committed by GitHub
commit 7a1a4a05d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 3 deletions

View File

@ -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',

View File

@ -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">

View File

@ -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>