Notification icon/badge in Vaadin 12

Flow
1

I’m searching for a while to add a notification/counter icon/badge on an image in Vaadin 12.0.7
like :

![slack logo with notification counter]
(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_9qNvfk9Ukv5sNjeEQkWi7J0UCn5azij4P3hjKOwqc4YLXmPchQ)

I explored propositions about using the ‘Caption’ for my Component,
and play with the CSS-file to hover over the Component.
But that isn’t possible (anymore?) in Vaadin 12.
(like proposed on [stackoverflow]
(https://stackoverflow.com/questions/36498419/how-to-shows-notification-on-vaadin-component/43827144) and similar on the vaadin forum)
I also found [this]
(https://cdn.vaadin.com/vaadin-valo-styles/2.0.0-alpha7/demo/badges.html) info concerning badges in the valo-theme (which I’m not using)

this would be a great out-of-the-vaadin-box feature,
but for now I’m asking help for setting it up in Vaadin 12.0.7.

my code which is showing the image (which should get the badge);

//declaring the image
...
mohmSearchImage = new Image();
        mohmSearchImage.addClassName("mohm-company-button");
...

//adding the eventlistener so the image works like a button
...
 mohmSearchImage.getElement().addEventListener(CLICK, (DomEventListener) event -> searchView.showTiles(SearchType.MOHM_COMPANY));
...

//css-file
...
.mohm-company-button {
    content: url("../images/MoHM.svg");
    cursor: pointer;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
...
2

It took a while, but I found a way. I wrapped the img inside a DIV, like so:

Image img = new Image("https://vaadin.com/images/vaadin-logo.svg", "ad");
img.setWidth("200px");
Div d = new Div(img);
d.addClassName("tagged");
add(d);

Then, some CSS that I put inside shared-styles.html:

  <dom-module id="sdf" theme-for="vaadin-vertical-layout">
    <template>
      <style>
	::slotted(div.tagged) {
		position:relative;
	}
	::slotted(div.tagged)::before {
		content: attr(notifications);
		background: pink;
		border-radius: 3px;
		position:absolute;
		top:0;
		right: 0;
	}
      </style>
    </template>
  </dom-module>

And then, to actually see a badge:

d.getElement().setAttribute("notifications", "10+");

Hope this helps :slight_smile:

3

thx @Thomas for helping me implement a solution,

I didn’t succeed yet,
I’ve a question about the css:

I added the css you posted to my shared-styles.html
but I’m not sure if this is the right way:
(this is the complete content of the shared-stules.html)

<custom-style>
    <!-- This is where your App's styling should go. You can use .css files too. -->
    <style>
        .main-layout {
            padding: 20px;
        }
    </style>
</custom-style>

<dom-module id="sdf" theme-for="vaadin-vertical-layout">
    <template>
        <style>
            ::slotted(div.tagged) {
                position:relative;
            }
            ::slotted(div.tagged)::before {
                content: attr(notifications);
                background: pink;
                border-radius: 3px;
                position:absolute;
                top:0;
                right: 0;
            }
        </style>
    </template>
</dom-module>

I do think the css is picked up by the browser,
as I can see in this screenshot, but I’m wondering why I can’t see the badge.
do I have to integrate the div in a vertical-layout? I don’t understand the id=“sdf”?
![screenshot]
(http://i65.tinypic.com/2db1ipz.png)

4

Hi! the dom-module needs to be inside custom-style. And the ID is just something unique, I probably should have given it a less random name :slight_smile: