This is a migrated thread and some comments may be shown as answers.

Badges overlaying icons

3 Answers 40 Views
Badge
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 10 Sep 2020, 07:45 PM
Trying to find a simple example of a badge where it is overlaying an icon, not next to a button etc.  A badge example similar to every other "badge" on the web.  Even on this Telerik site, the shopping cart with the "0" items badge overlaid on top.

3 Answers, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 14 Sep 2020, 03:39 PM

Hi, Robert

In order to achieve the desired result, you can use the Placement and Position methods, provided by the Badge API.

I will leave a code sample for you.

<span class="k-badge-container">
    <span class="k-icon k-i-user k-icon-36 k-badge-overlay"></span>
    @(Html.Kendo().Badge()
        .Name("my-badge")
        .Text("22")
        .Color(BadgeColor.Success)
        .Position(BadgePosition.TopEnd)
        .Placement(BadgePlacement.Outside)
        .Size(BadgeSize.Small)
        .Shape(BadgeShape.Circle)
    )
</span>
<style>
    .k-icon-36 {
        font-size: 36px; /* Sets icon size to 36px */
        text-indent: 5px;
    }
</style>

You can also visit this dojo link, which follows the exact same logic in JavaScript, in order to preview the result.

https://dojo.telerik.com/iLEYiXiw

You can read more about the Badge over here. 

https://docs.telerik.com/aspnet-mvc/html-helpers/layout/badge/overview

And you can also find out about the different methods the API provides here.

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/BadgeBuilder

Let me know if you have any other questions.

Regards, Georgi Denchev Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Robert
Top achievements
Rank 1
Veteran
answered on 16 Sep 2020, 05:16 PM

Thanks for the example.  Is there a way to set the color to an RGB value:

.ThemeColor("#DE5A43")

does not work, it wants an enumeration of BadgeColor

0
Accepted
Georgi Denchev
Telerik team
answered on 18 Sep 2020, 06:58 AM

Hello, Robert

You are correct, ThemeColor accepts only predefined enumeration values.

What you could do instead, is set the background and border colors of the badge, using css.

#badge {
      border-color: #000;
      background-color: #DE5A43;
}

And if you want to change the color of the text inside the badge as well:

#badge {
      border-color: #000;
      background-color: #DE5A43;
      color: #FFF;
}

You may find the updated dojo here - https://dojo.telerik.com/iLEYiXiw/3

 

Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Badge
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Robert
Top achievements
Rank 1
Veteran
Share this question
or