ChipList Appearance Settings

You can control the appearance of the chips in the ChipList by setting the following parameters:

• FillMode
• Rounded
• Size

You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.

Also see how to set ThemeColor and FillMode separately for each chip in the ChipList.

FillMode

The FillMode controls how all the chips are filled. You can set it to a member of the Telerik.Blazor.ThemeConstants.Chip.FillMode class:

Class members	Manual declarations
Solid default value	solid
Outline	outline

You can also set FillMode separately for each chip in the ChipList through a property of the data item.

Using ChipList FillMode

@* These are all built-in fill modes *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.FillMode)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string fillmode = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChipList Data="@ChipListSource"
                     FillMode="@fillmode">
            </TelerikChipList>
        </div>
    }
}

@code {
    private IEnumerable<ChipModel> ChipListSelectedItems { get; set; } = new List<ChipModel>();

    private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
    {
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo
        }
    };

    public class ChipModel
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

Rounded

The Rounded parameter applies the border-radius CSS rule to the chip to achieve curving of the edges. You can set it to a member of the Telerik.Blazor.ThemeConstants.Chip.Rounded class:

Class members	Manual declarations
Small	sm
Medium default value	md
Large	lg
Full	full

Using ChipList Rounded

@* The built-in rounded edges of the chip.  *@

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.Rounded)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string rounded = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChipList Data="@ChipListSource"
                     Rounded="@rounded">
            </TelerikChipList>
        </div>
    }
}

@code {
    private IEnumerable<ChipModel> ChipListSelectedItems { get; set; } = new List<ChipModel>();

    private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
    {
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo
        }
    };

    public class ChipModel
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

Size

You can increase or decrease the size of the chips by setting the Size parameter to a member of the Telerik.Blazor.ThemeConstants.Chip.Size class:

Class members	Manual declarations
Small	sm
Medium default value	md
Large	lg

Using ChipList Size

@{
    var fields = typeof(Telerik.Blazor.ThemeConstants.Chip.Size)
        .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
        | System.Reflection.BindingFlags.FlattenHierarchy)
        .Where(field => field.IsLiteral && !field.IsInitOnly).ToList();

    foreach (var field in fields)
    {
        string size = field.GetValue(null).ToString();

        <div style="float:left; margin: 20px;">
            <TelerikChipList Data="@ChipListSource"
                     Size="@size">
            </TelerikChipList>
        </div>
    }
}

@code {
    private IEnumerable<ChipModel> ChipListSelectedItems { get; set; } = new List<ChipModel>();

    private List<ChipModel> ChipListSource { get; set; } = new List<ChipModel>()
    {
        new ChipModel()
        {
            Text = "Audio",
            Icon = SvgIcon.FileAudio
        },
        new ChipModel()
        {
            Text = "Video",
            Icon = SvgIcon.FileVideo
        }
    };

    public class ChipModel
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.

See Also

• Set ThemeColor for each chip in the ChipList