3 Answers, 1 is accepted
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).
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
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/.