Badges overlaying icons

4 posts, 1 answers
  1. Robert
    Robert avatar
    36 posts
    Member since:
    Dec 2016

    Posted 10 Sep 2020 Link to this post

    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.
  2.
  3. Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 14 Sep 2020 Link to this post

    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).

  5. Robert
    Robert avatar
    36 posts
    Member since:
    Dec 2016

    Posted 16 Sep 2020 in reply to Georgi Denchev Link to this post

    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

  7. Answer
    Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 18 Sep 2020 Link to this post

    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/.

  8.
Back to Top