Completed
Last Updated: 29 Aug 2025 11:41 by ADMIN
Release 2025 Q3 (Aug)
Juan Angel
Created on: 21 Aug 2024 06:43
Category: ChipList
Type: Feature Request
8
Add the ability to control Chip colors

The default color of the chips is currently set to the base color, and this color cannot be changed. To allow customization, consider adding a ThemeColor parameter, similar to what is available in the Chip component.

=======

TELERIK EDIT:

In the meantime, you can consider CSS-based workarounds. The following example shows a more dynamic approach to the task.

<h3>Telerik CSS Variables</h3>

<TelerikChipList Data="@ChipListDataVariables">
    <ItemTemplate>
        <span class="@context.ColorClass">
            <TelerikSvgIcon Icon="@context.Icon" />
            @context.Text
        </span>
    </ItemTemplate>
</TelerikChipList>

<h3>Colors</h3>

<TelerikChipList Data="@ChipListDataColors">
    <ItemTemplate>
        <span class="c-@context.ColorClass">
            <TelerikSvgIcon Icon="@context.Icon" />
            @context.Text
        </span>
    </ItemTemplate>
</TelerikChipList>

<style>
    @foreach (ChipModel chip in ChipListDataVariables)
    {
        <text> .k-chip:has(.@chip.ColorClass) { background-color: var(--kendo-color-@chip.ColorClass); color: var(--kendo-color-on-@chip.ColorClass); } </text>
    }

    @foreach (ChipModel chip in ChipListDataColors)
    {
        <text> .k-chip:has(.c-@chip.ColorClass) { background-color: @chip.ColorClass; color: white; } </text>
    }
</style>

@code {
    private List<ChipModel> ChipListDataVariables { get; set; } = new List<ChipModel>() {
        new ChipModel()
        {
            Text = "Excel",
            Icon = SvgIcon.FileExcel,
            ColorClass = "base"
        },
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio,
            Removable = true,
            ColorClass = "primary"
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo,
            ColorClass = "info"
        },
        new ChipModel()
        {
            Text = "Image",
            Icon = SvgIcon.FileImage,
            ColorClass = "success"
        }
    };

    private List<ChipModel> ChipListDataColors { get; set; } = new List<ChipModel>() {
        new ChipModel()
        {
            Text = "Excel",
            Icon = SvgIcon.FileExcel,
            ColorClass = "gray"
        },
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio,
            Removable = true,
            ColorClass = "red"
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo,
            ColorClass = "blue"
        },
        new ChipModel()
        {
            Text = "Image",
            Icon = SvgIcon.FileImage,
            ColorClass = "green"
        }
    };

    public class ChipModel
    {
        public string Text { get; set; } = string.Empty;
        public ISvgIcon? Icon { get; set; }
        public bool Disabled { get; set; }
        public bool Removable { get; set; }
        public string ColorClass { get; set; } = string.Empty;
    }
}

 

0 comments