In this exercise, we will build a fun and useful component, that is a notification message. I have grabbed the markup from the docs of Symantec UI and put it in the boilerplate that you will work on. This is how the notification looks in the browser. Symantec provides us with four types of messages, the info, the warning, the error, and the success.
So, If we swap out the Info class with Error for example, this message will become red. Your goal for this exercise is to create a component that will be past some content and the type of the notification and will display a message. For example, the component name should be NotificationMessage. It will receive a TypeProp and a HeaderProp.
For the content of the notification, we could use a prop, but that can be limiting. On the other hand, if we use a slot and pass the content to the message, we can easily format a part of the text, or add a link, since we are passing HTML to the component directly. As you may expect, the notification should go away when the user clicks the X button. Okay, it's time for you to write some code.
Pause the video and come back when you're done. Welcome back. As we did in the previous lesson, we will start with the JavaScript. So, to get started, I will create the component.
First, I'll connect it with its template. Then, we'll implement the props. We have a prop to get the type of the notification. and a prop to get the header of the notification.
Both of these will be strings. Cool. Let's code out the template now. I have this script tag that is already ready to contain the template.
So what we have to do is move the markup inside of the script. So here we say UI error message. But we don't want the type of the message to be static. What we want to do is to use the type that comes from the property.
To do that, we will bind the class that comes from the type prop. Notice here that we can use the class attribute twice. Once for static classes and once for dynamic classes. Next, let's display the header.
Lastly, we should display the content of the slot using the slot element. Alright, let's see what we have so far. This is awesome. Let me also add another notification of the type success, just to be able to see that everything is working as expected.
Very nice. Next, let's implement the close functionality. What we want to do is to call a method when the user clicks the close icon. So, we use vonClick.
or the shorthand atClick. And let's call this method hide. In order to hold the status of the notification message, I will add the data property that I will call hidden. And initially, the hidden property will be false.
Now let's implement the hide method. It is the hide method's responsibility to change hidden to true. Now, When the user clicks the X icon, the hide method will run, and it will hide the notification by setting the hidden data to true. So, what's left is to apply a VIF on the root element to conditionally display the notification depending on the value of hidden.
Okay, let's give it a shot. Awesome. And with that, the notification is ready. Now, this is nice, but We can also set up a default notification, where we will just need to pass the content, like that.
We can easily do this by setting a default type for the notification, which can be info. And we can also set a default header. I'll call it information, but you can call it whatever you'd like. Let's give the page a refresh and see what we get.
Nice. This is awesome. Good job.