Semantic UI is a modern front-end development framework which helps build responsive and aesthetically beautiful layouts. It comes pack with highly responisve componenets to cater to all front end needs, and provides excellent documentation for them. The web of front end development is so large, it is never possible to cover all the possible requirements of a developer with pre built components.
In this article we are going to build a notification dropdown from scratch.
So we begin by generating a new component via
This should generate the boiler plate code for our component, with the template file located at:
It is assumed that you already have a basic ember app with atleast a navbar set up. The notification drop down will be integrated with the navbar as a separate component.
We will use the
popup component of semantic ui as the ubderlying structure of our dropdown.
I have used some dummy data stored in a separate file, you can use any dummy data you wish, either by directly hardcoding it or importing it from a js file stored somewhere else.
We will make use of the
floating label of semantic UI to display the number of unread notifications.
Now the next biggest challenge is to make the popup scrollable, they are not scrollable by default and may result in an error if their height exceeds that of the view port. So we apply some styling now.
All of this takes care of the styling. Next, we need to take care of initialising the notification popup. For this we need to go to the navbar component as it is the one who calls the notification dropdown component. And add this to it:
This will take care of cleaning up as well. Now, you should have the notification drop down up and running !!Share