How do I add badges to buttons?

[adam griffin]

[Yurii Orishchuk]

Hi Adam.

Please follow these steps to set custom icon to the button:

1 Activate your button.

2 Navigate to properties and give it class name "myButtonWithCamera" http://prntscr.com/3bz4w9/direct

3 Choose icon as "Plus".

4 Choose position you need.

5 Open/create CSS asset and fill it with following code:

precode

.myButtonWithCamera.ui-icon-plus:after{
//Where you need to replace "digital_camera.png" with your icon name.
background-image: url(../../../../files/views/assets/image/digital_camera.png);
background-size: cover;
-webkit-border-radius: 0;

Code: Select all

 //Here is styles to move your icon where you need. 
 //right: ..px; 
 //top: ..px; 

}

/code/pre

Note you should to change "digital_camera.png" in css by your downloaded icon name.

That's all.

[adam griffin]

How can I do this for a navbar button? I should have clarified.

[Yurii Orishchuk]

Adam.

For navbar item you can use following solution:

1 Activate your button.

2 Navigate to properties and give it name "myButtonWithCameraName"

3 Choose icon as "Plus".

4 Open/create CSS asset and fill it with following code:

precode

/* note: "myButtonWithCameraName" is your button name /
.ui-btn.ui-icon-plus[name=myButtonWithCameraName]:after{
/Where you need to replace "digital_camera.png" with your icon name./
background-color: transparent;
background-image: url(../../../../files/views/assets/image/phone.png);
background-size: cover;
-webkit-border-radius: 0;
/Here is styles to move your icon where you need./
/right: ..px;/
/top: ..px;*/
}

/code/pre

Note you should to change "phone.png" in css by your downloaded icon name.

That's all.

[adam griffin]

I was trying to make me it more like the badge is hovering over the button like in the image above but instead I can place numbers in it. I am using it to increment my service calls. I do not want to change the icon associated with the button just add a badge.

[Evgene Karachevtsev]

Hello Adam,

Please take a look at this decision:
http://stackoverflow.com/a/16907332

[adam griffin]

Where should i set the ui-badge-container? I tried this once before and had trouble

[Evgene Karachevtsev]

Adam,

You should use this code on event page show for example:

code$("[name=mobilenavbaritem_118]").parent().addClass("ui-badge-container");
$("[name=mobilenavbaritem_118]")&#46;before('<span id="badge-page1" class="badge">4</span>'); /code

where mobilenavbaritem_118 is the name of the button in navbar

[adam griffin]

I get the error that badgeCount is not defined

[adam griffin]

How can I make the class visible and increment the badge? BTW great answer