How to add a style to notifications in vue.js?
How to add a style to notifications in vue.js?
1 answer
@dedrick
To add styles to notifications in Vue.js, you can use CSS classes to customize the appearance of the notifications. Here's an example of how you can add a custom style to notifications in Vue.js:
First, create a notification component that will display the notification message:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Notification.vue
<template>
<div class="notification" :class="type">
{{ message }}
</div>
</template>
<script>
export default {
props: {
message: String,
type: String // This will be used to add different styles to the notification
}
}
</script>
<style scoped>
.notification {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.error {
background-color: #ffdddd;
color: #ff0000;
}
.success {
background-color: #d4edda;
color: #155724;
}
</style>
|
In your main Vue component, import the Notification component and use it to display notifications with different styles:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Main.vue
<template>
<div>
<notification message="Error message" type="error" />
<notification message="Success message" type="success" />
</div>
</template>
<script>
import Notification from './Notification.vue';
export default {
components: {
Notification
}
}
</script>
|
In this example, the Notification component receives two props: message for the notification message and type for the type of notification (e.g., error or success). Depending on the type prop, the component will apply different styles to the notification using CSS classes.
You can further customize the styles in the component's CSS to achieve the desired appearance for your notifications.