Blazor
## Data Binding
-The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
+The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. Some properties of the ChipList model can enhance the behavior and appearance of each chip. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
## Selection
@@ -68,7 +68,7 @@ You can use the built-in events of the Blazor ChipList to react to chip selectio
## Appearance
-You can customize the appearance of the Blazor ChipList via a variety of built-in customization options. [Read more about the ChipList appearance settings...](slug:chiplist-appearance)
+You can customize the [appearance of the Blazor ChipList](slug:chiplist-appearance) via a variety of built-in customization options. Also see how to [set `ThemeColor`](slug:chip-appearance#themecolor) for each [chip in the ChipList](slug:chiplist-bound).
## ChipList Parameters
@@ -82,7 +82,7 @@ The table below lists the ChipList parameters. Also check the [ChipList API Refe
| `AriaLabelledBy` | `string` | Maps to the `area-labelledby` attribute. Use this parameter to reference another element to define its accessible name. |
| `Class` | `string` | An additional CSS class for the `` element. Use it to [customize the component styles and override the theme](slug:themes-override). |
| `Data` | `IEnumerable` | The collection of the items that will be rendered as chips. |
-| `Removable` | `bool` | Specifies if the chip can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
+| `Removable` | `bool` | Specifies if the chips can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
| `RemoveIcon` | `object` | Defines the icon that will be rendered if the `Removable` parameter is set to `true`. |
## Next Steps
From a9b2d6a6d0716fe0798ca593b77280e8bf79462e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 19 Aug 2025 09:44:10 +0300
Subject: [PATCH 2/4] Add monospace font to parameters
---
components/chip/appearance.md | 8 ++++----
components/chiplist/appearance.md | 6 +++---
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/components/chip/appearance.md b/components/chip/appearance.md
index 1b9a8ffe1d..a0e38dbd37 100644
--- a/components/chip/appearance.md
+++ b/components/chip/appearance.md
@@ -12,10 +12,10 @@ position: 10
You can control the appearance of the Chip by using the following parameters:
-* [FillMode](#fillmode)
-* [Rounded](#rounded)
-* [Size](#size)
-* [ThemeColor](#themecolor)
+* [`FillMode`](#fillmode)
+* [`Rounded`](#rounded)
+* [`Size`](#size)
+* [`ThemeColor`](#themecolor)
## FillMode
diff --git a/components/chiplist/appearance.md b/components/chiplist/appearance.md
index fd05799653..502d2dc879 100644
--- a/components/chiplist/appearance.md
+++ b/components/chiplist/appearance.md
@@ -12,9 +12,9 @@ position: 35
You can control the appearance of the chips in the ChipList by setting the following parameters:
-* [FillMode](#fillmode)
-* [Rounded](#rounded)
-* [Size](#size)
+* [`FillMode`](#fillmode)
+* [`Rounded`](#rounded)
+* [`Size`](#size)
You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
From 06fd797ea89fde35a303abe7e1c3e4354024b916 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 28 Aug 2025 11:32:40 +0300
Subject: [PATCH 3/4] Add FillModeField
---
components/chiplist/appearance.md | 12 ++-
components/chiplist/data-bind.md | 158 ++++++++++++++++++------------
2 files changed, 104 insertions(+), 66 deletions(-)
diff --git a/components/chiplist/appearance.md b/components/chiplist/appearance.md
index 502d2dc879..c0621bf9d1 100644
--- a/components/chiplist/appearance.md
+++ b/components/chiplist/appearance.md
@@ -18,18 +18,20 @@ You can control the appearance of the chips in the ChipList by setting the follo
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`](slug:chip-appearance#themecolor) for each [chip in the ChipList](slug:chiplist-bound).
+Also see how to set [`ThemeColor`](slug:chip-appearance#themecolor) and [`FillMode`](slug:chip-appearance#fillmode) separately for each [chip in the ChipList](slug:chiplist-bound).
## FillMode
-The `FillMode` controls how the individual chip is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
+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`|
->caption The built-in Fill modes
+You can also set `FillMode` separately for each chip in the ChipList through a [property of the data item](slug:chiplist-bound).
+
+>caption Using ChipList FillMode
````RAZOR
@* These are all built-in fill modes *@
@@ -88,7 +90,7 @@ The `Rounded` parameter applies the `border-radius` CSS rule to the chip to achi
|`Large`|`lg`|
|`Full`|`full`|
->caption The built-in values of the Rounded attribute
+>caption Using ChipList Rounded
````RAZOR
@* The built-in rounded edges of the chip. *@
@@ -146,7 +148,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
| `Medium`
default value |`md`|
| `Large` |`lg`|
->caption The built-in chip sizes
+>caption Using ChipList Size
````RAZOR
@{
diff --git a/components/chiplist/data-bind.md b/components/chiplist/data-bind.md
index 152a4489fe..4c85858ce4 100644
--- a/components/chiplist/data-bind.md
+++ b/components/chiplist/data-bind.md
@@ -16,117 +16,153 @@ This article explains how to provide data to a ChipList component, and the prope
## Data Binding Features
-The ChipList has features that map to properties in the component model class. The following example uses property names that will work automatically, with no additional ChipList configuration.
+The ChipList has features that map to properties in the component model class.
+
+### Schema
+
+The table below lists the available data binding parameters for the Blazor ChipList component. Use them when your model property names are different from the default values.
+
+| ChipList Parameter | Default Value | Description |
+|----------|----------|----------|
+| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
+| `FillModeField`| `"FillMode"` | Defines the [`FillMode` of each chip](slug:chip-appearance#fillmode). |
+| `IconField` | `"Icon"` | The icon that renders in the chip. See [Icons](#icons) below. |
+| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
+| `TextField` | `"Text"` | The text that renders in the chip. |
+| `ThemeColorField`| `"ThemeColor"` | Defines the [`ThemeColor` of each chip](slug:chip-appearance#themecolor). |
+
+#### Icons
+
+The `IconField` model property can hold:
+
+* A property of the static `SvgIcon` class;
+* A member of the `FontIcon` enum;
+* A `string` that is a CSS class for a custom icon.
+
+@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
+
+## Examples
+
+### Default Property Names
+
+The following example uses property names that work automatically with no additional ChipList configuration.
>caption Using default property names in the ChipList model class
````RAZOR
-
+
@code {
- private List ChipListData { get; set; } = new List() {
+ private List ChipListData { get; set; } = new()
+ {
new ChipModel()
{
- Text = "Audio",
- Icon = SvgIcon.FileAudio,
- Disabled = false,
- Removable = true,
- ThemeColor = ThemeConstants.Chip.ThemeColor.Base
+ Text = "Solid Base",
+ Icon = SvgIcon.Sparkles
},
new ChipModel()
{
- Text = "Video",
- Icon = SvgIcon.FileVideo,
- Disabled = false,
- Removable = false,
- ThemeColor = ThemeConstants.Chip.ThemeColor.Warning
+ Text = "Outline Info",
+ Icon = SvgIcon.QuestionCircle,
+ ThemeColor = ThemeConstants.Chip.ThemeColor.Info,
+ FillMode = ThemeConstants.Chip.FillMode.Outline
},
new ChipModel()
{
- Text = "Image",
- Icon = SvgIcon.FileImage,
- Disabled = true,
- Removable = false,
- ThemeColor = ThemeConstants.Chip.ThemeColor.Info
+ Text = "Solid Success",
+ Icon = SvgIcon.Star,
+ ThemeColor = ThemeConstants.Chip.ThemeColor.Success
+ },
+ new ChipModel()
+ {
+ Text = "Outline Warning Removable",
+ Icon = SvgIcon.ExclamationCircle,
+ ThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
+ FillMode = ThemeConstants.Chip.FillMode.Outline,
+ Removable = true
+ },
+ new ChipModel()
+ {
+ Text = "Solid Error Disabled",
+ Icon = SvgIcon.XOutline,
+ ThemeColor = ThemeConstants.Chip.ThemeColor.Error,
+ Disabled = true
}
};
public class ChipModel
{
- public string Text { get; set; } = string.Empty;
- public ISvgIcon? Icon { get; set; }
public bool Disabled { get; set; }
+ public string FillMode { get; set; } = string.Empty;
+ public object? Icon { get; set; }
public bool Removable { get; set; }
+ public string Text { get; set; } = string.Empty;
public string ThemeColor { get; set; } = string.Empty;
}
}
````
-### Data Binding Schema
+### Custom Property Names
-The table below lists the available data binding parameters for the Blazor ChipList component. Use them when your model property names are different from the default values.
-
-| ChipList Parameter | Default Value | Description |
-|----------|----------|----------|
-| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
-| `IconField` | `"Icon"` | The icon that renders in the chip. |
-| `TextField` | `"Text"` | The text that renders in the chip. |
-| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
-| `ThemeColorField`| `"ThemeColor"` | Defines the [`ThemeColor` of each chip](slug:chip-appearance#themecolor). |
-
-#### Icons
-
-The `IconField` model property can hold:
-
-* A property of the static `SvgIcon` class;
-* A member of the `FontIcon` enum;
-* A `string` that is a CSS class for a custom icon.
-
-@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
+The following example uses custom property names that need explicit ChipList configuration.
>caption ChipList with custom model property names
````RAZOR
-
-
-@[template](/_contentTemplates/common/icons.md#font-icons-css-code)
+ FillModeField="@nameof(ChipModel.ChipFillMode)"
+ IconField="@nameof(ChipModel.ChipIcon)"
+ RemovableField="@nameof(ChipModel.ChipRemovable)"
+ TextField="@nameof(ChipModel.ChipText)"
+ ThemeColorField="@nameof(ChipModel.ChipThemeColor)" />
@code {
- private List ChipListData { get; set; } = new List() {
+ private List ChipListData { get; set; } = new()
+ {
new ChipModel()
{
- ChipText = "Audio (SVG icon)",
- ChipIcon = SvgIcon.FileAudio,
- ChipDisabled = false,
- ChipRemovable = true
+ ChipText = "Solid Base",
+ ChipIcon = SvgIcon.Sparkles
+ },
+ new ChipModel()
+ {
+ ChipText = "Outline Info",
+ ChipIcon = SvgIcon.QuestionCircle,
+ ChipThemeColor = ThemeConstants.Chip.ThemeColor.Info,
+ ChipFillMode = ThemeConstants.Chip.FillMode.Outline
},
new ChipModel()
{
- ChipText = "Video (Font icon)",
- ChipIcon = FontIcon.FileVideo,
- ChipDisabled = false,
- ChipRemovable = false
+ ChipText = "Solid Success",
+ ChipIcon = SvgIcon.Star,
+ ChipThemeColor = ThemeConstants.Chip.ThemeColor.Success
+ },
+ new ChipModel()
+ {
+ ChipText = "Outline Warning Removable",
+ ChipIcon = SvgIcon.ExclamationCircle,
+ ChipThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
+ ChipFillMode = ThemeConstants.Chip.FillMode.Outline,
+ ChipRemovable = true
},
new ChipModel()
{
- ChipText = "Image (disabled)",
- ChipIcon = SvgIcon.FileImage,
- ChipDisabled = true,
- ChipRemovable = false
+ ChipText = "Solid Error Disabled",
+ ChipIcon = SvgIcon.XOutline,
+ ChipThemeColor = ThemeConstants.Chip.ThemeColor.Error,
+ ChipDisabled = true
}
};
public class ChipModel
{
- public string ChipText { get; set; }
- public object ChipIcon { get; set; }
public bool ChipDisabled { get; set; }
+ public string ChipFillMode { get; set; } = string.Empty;
+ public object? ChipIcon { get; set; }
public bool ChipRemovable { get; set; }
+ public string ChipText { get; set; } = string.Empty;
+ public string ChipThemeColor { get; set; } = string.Empty;
}
}
````
From f6725416cf0338dba1233b1e25f9e6ab7ed5a7cb Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 28 Aug 2025 11:35:06 +0300
Subject: [PATCH 4/4] Add fillmode to intro
---
components/chiplist/overview.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/chiplist/overview.md b/components/chiplist/overview.md
index e49950f3e9..e6eb01e3c3 100644
--- a/components/chiplist/overview.md
+++ b/components/chiplist/overview.md
@@ -68,7 +68,7 @@ You can use the built-in events of the Blazor ChipList to react to chip selectio
## Appearance
-You can customize the [appearance of the Blazor ChipList](slug:chiplist-appearance) via a variety of built-in customization options. Also see how to [set `ThemeColor`](slug:chip-appearance#themecolor) for each [chip in the ChipList](slug:chiplist-bound).
+You can customize the [appearance of the Blazor ChipList](slug:chiplist-appearance) via a variety of built-in customization options. Also see how to set [`ThemeColor`](slug:chip-appearance#themecolor) and [`FillMode`](slug:chip-appearance#fillmode) separately for each [chip in the ChipList](slug:chiplist-bound).
## ChipList Parameters