Skip to content

Commit 96b1332

Browse files
dimodidimodi
authored
docs(ChipList): Add ThemeColorField parameter (#3190)
* docs(ChipList): Add ThemeColorField parameter * Add monospace font to parameters * Add FillModeField * Add fillmode to intro
1 parent 20cea75 commit 96b1332

File tree

4 files changed

+122
-74
lines changed

4 files changed

+122
-74
lines changed

‎components/chip/appearance.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ position: 10
1212

1313
You can control the appearance of the Chip by using the following parameters:
1414

15-
* [FillMode](#fillmode)
16-
* [Rounded](#rounded)
17-
* [Size](#size)
18-
* [ThemeColor](#themecolor)
15+
* [`FillMode`](#fillmode)
16+
* [`Rounded`](#rounded)
17+
* [`Size`](#size)
18+
* [`ThemeColor`](#themecolor)
1919

2020
## FillMode
2121

@@ -144,7 +144,6 @@ The `ThemeColor` parameter applies a predefined text color and background color.
144144
|`Success`|`success`|
145145
|`Warning`|`warning`|
146146
|`Error`|`error`|
147-
|`None`|`none`|
148147

149148
>caption The built-in ThemeColors
150149
@@ -162,7 +161,7 @@ The `ThemeColor` parameter applies a predefined text color and background color.
162161
<div style="float:left; margin: 20px;">
163162
<TelerikChip @bind-Selected="@IsChipSelected"
164163
ThemeColor="@themeColor"
165-
Text="Audio">
164+
Text="@themeColor">
166165
</TelerikChip>
167166
</div>
168167
}

‎components/chiplist/appearance.md‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,28 @@ position: 35
1010

1111
# ChipList Appearance Settings
1212

13-
You can control the appearance of the chips in the ChipList by setting the following attributes:
13+
You can control the appearance of the chips in the ChipList by setting the following parameters:
1414

15-
* [FillMode](#fillmode)
16-
* [Rounded](#rounded)
17-
* [Size](#size)
15+
* [`FillMode`](#fillmode)
16+
* [`Rounded`](#rounded)
17+
* [`Size`](#size)
1818

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

21+
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).
22+
2123
## FillMode
2224

23-
The `FillMode` controls how the individual chip is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
25+
The `FillMode` controls how all the chips are filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
2426

2527
| Class members | Manual declarations |
2628
|------------|--------|
2729
|`Solid` <br /> default value|`solid`|
2830
|`Outline`|`outline`|
2931

30-
>caption The built-in Fill modes
32+
You can also set `FillMode` separately for each chip in the ChipList through a [property of the data item](slug:chiplist-bound).
33+
34+
>caption Using ChipList FillMode
3135
3236
````RAZOR
3337
@* These are all built-in fill modes *@
@@ -86,7 +90,7 @@ The `Rounded` parameter applies the `border-radius` CSS rule to the chip to achi
8690
|`Large`|`lg`|
8791
|`Full`|`full`|
8892

89-
>caption The built-in values of the Rounded attribute
93+
>caption Using ChipList Rounded
9094
9195
````RAZOR
9296
@* The built-in rounded edges of the chip. *@
@@ -144,7 +148,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
144148
| `Medium` <br /> default value |`md`|
145149
| `Large` |`lg`|
146150

147-
>caption The built-in chip sizes
151+
>caption Using ChipList Size
148152
149153
````RAZOR
150154
@{
@@ -191,3 +195,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
191195
````
192196

193197
@[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)
198+
199+
## See Also
200+
201+
* [Set ThemeColor for each chip in the ChipList](slug:chiplist-bound)

‎components/chiplist/data-bind.md‎

Lines changed: 98 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -16,112 +16,153 @@ This article explains how to provide data to a ChipList component, and the prope
1616

1717
## Data Binding Features
1818

19-
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.
19+
The ChipList has features that map to properties in the component model class.
20+
21+
### Schema
22+
23+
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.
24+
25+
| ChipList Parameter | Default Value | Description |
26+
|----------|----------|----------|
27+
| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
28+
| `FillModeField`| `"FillMode"` | Defines the [`FillMode` of each chip](slug:chip-appearance#fillmode). |
29+
| `IconField` | `"Icon"` | The icon that renders in the chip. See [Icons](#icons) below. |
30+
| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
31+
| `TextField` | `"Text"` | The text that renders in the chip. |
32+
| `ThemeColorField`| `"ThemeColor"` | Defines the [`ThemeColor` of each chip](slug:chip-appearance#themecolor). |
33+
34+
#### Icons
35+
36+
The `IconField` model property can hold:
37+
38+
* A property of the static `SvgIcon` class;
39+
* A member of the `FontIcon` enum;
40+
* A `string` that is a CSS class for a custom icon.
41+
42+
@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
43+
44+
## Examples
45+
46+
### Default Property Names
47+
48+
The following example uses property names that work automatically with no additional ChipList configuration.
2049

2150
>caption Using default property names in the ChipList model class
2251
2352
````RAZOR
24-
<TelerikChipList Data="@ChipListData"></TelerikChipList>
53+
<TelerikChipList Data="@ChipListData" />
2554
2655
@code {
27-
private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
56+
private List<ChipModel> ChipListData { get; set; } = new()
57+
{
2858
new ChipModel()
2959
{
30-
Text = "Audio",
31-
Icon = SvgIcon.FileAudio,
32-
Disabled = false,
33-
Removable = true
60+
Text = "Solid Base",
61+
Icon = SvgIcon.Sparkles
3462
},
3563
new ChipModel()
3664
{
37-
Text = "Video",
38-
Icon = SvgIcon.FileVideo,
39-
Disabled = false,
40-
Removable = false
65+
Text = "Outline Info",
66+
Icon = SvgIcon.QuestionCircle,
67+
ThemeColor = ThemeConstants.Chip.ThemeColor.Info,
68+
FillMode = ThemeConstants.Chip.FillMode.Outline
69+
},
70+
new ChipModel()
71+
{
72+
Text = "Solid Success",
73+
Icon = SvgIcon.Star,
74+
ThemeColor = ThemeConstants.Chip.ThemeColor.Success
75+
},
76+
new ChipModel()
77+
{
78+
Text = "Outline Warning Removable",
79+
Icon = SvgIcon.ExclamationCircle,
80+
ThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
81+
FillMode = ThemeConstants.Chip.FillMode.Outline,
82+
Removable = true
4183
},
4284
new ChipModel()
4385
{
44-
Text = "Image",
45-
Icon = SvgIcon.FileImage,
46-
Disabled = true,
47-
Removable = false
86+
Text = "Solid Error Disabled",
87+
Icon = SvgIcon.XOutline,
88+
ThemeColor = ThemeConstants.Chip.ThemeColor.Error,
89+
Disabled = true
4890
}
4991
};
5092
5193
public class ChipModel
5294
{
53-
public string Text { get; set; }
54-
public ISvgIcon Icon { get; set; }
5595
public bool Disabled { get; set; }
96+
public string FillMode { get; set; } = string.Empty;
97+
public object? Icon { get; set; }
5698
public bool Removable { get; set; }
99+
public string Text { get; set; } = string.Empty;
100+
public string ThemeColor { get; set; } = string.Empty;
57101
}
58102
}
59103
````
60104

61-
### Data Binding Schema
105+
### Custom Property Names
62106

63-
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.
64-
65-
| ChipList Parameter | Default Value | Description |
66-
|----------|----------|----------|
67-
| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
68-
| `IconField` | `"Icon"` | The icon that renders in the chip. |
69-
| `TextField` | `"Text"` | The text that renders in the chip. |
70-
| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
71-
72-
#### Icons
73-
74-
The `IconField` model property can hold:
75-
76-
* A property of the static `SvgIcon` class;
77-
* A member of the `FontIcon` enum;
78-
* A `string` that is a CSS class for a custom icon.
79-
80-
@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
107+
The following example uses custom property names that need explicit ChipList configuration.
81108

82109
>caption ChipList with custom model property names
83110
84111
````RAZOR
85112
<TelerikChipList Data="@ChipListData"
86-
TextField="@nameof(ChipModel.ChipText)"
87-
IconField="@nameof(ChipModel.ChipIcon)"
88113
DisabledField="@nameof(ChipModel.ChipDisabled)"
89-
RemovableField="@nameof(ChipModel.ChipRemovable)">
90-
</TelerikChipList>
91-
92-
@[template](/_contentTemplates/common/icons.md#font-icons-css-code)
114+
FillModeField="@nameof(ChipModel.ChipFillMode)"
115+
IconField="@nameof(ChipModel.ChipIcon)"
116+
RemovableField="@nameof(ChipModel.ChipRemovable)"
117+
TextField="@nameof(ChipModel.ChipText)"
118+
ThemeColorField="@nameof(ChipModel.ChipThemeColor)" />
93119
94120
@code {
95-
private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
121+
private List<ChipModel> ChipListData { get; set; } = new()
122+
{
96123
new ChipModel()
97124
{
98-
ChipText = "Audio (SVG icon)",
99-
ChipIcon = SvgIcon.FileAudio,
100-
ChipDisabled = false,
101-
ChipRemovable = true
125+
ChipText = "Solid Base",
126+
ChipIcon = SvgIcon.Sparkles
102127
},
103128
new ChipModel()
104129
{
105-
ChipText = "Video (Font icon)",
106-
ChipIcon = FontIcon.FileVideo,
107-
ChipDisabled = false,
108-
ChipRemovable = false
130+
ChipText = "Outline Info",
131+
ChipIcon = SvgIcon.QuestionCircle,
132+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Info,
133+
ChipFillMode = ThemeConstants.Chip.FillMode.Outline
134+
},
135+
new ChipModel()
136+
{
137+
ChipText = "Solid Success",
138+
ChipIcon = SvgIcon.Star,
139+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Success
140+
},
141+
new ChipModel()
142+
{
143+
ChipText = "Outline Warning Removable",
144+
ChipIcon = SvgIcon.ExclamationCircle,
145+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
146+
ChipFillMode = ThemeConstants.Chip.FillMode.Outline,
147+
ChipRemovable = true
109148
},
110149
new ChipModel()
111150
{
112-
ChipText = "Image (disabled)",
113-
ChipIcon = SvgIcon.FileImage,
114-
ChipDisabled = true,
115-
ChipRemovable = false
151+
ChipText = "Solid Error Disabled",
152+
ChipIcon = SvgIcon.XOutline,
153+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Error,
154+
ChipDisabled = true
116155
}
117156
};
118157
119158
public class ChipModel
120159
{
121-
public string ChipText { get; set; }
122-
public object ChipIcon { get; set; }
123160
public bool ChipDisabled { get; set; }
161+
public string ChipFillMode { get; set; } = string.Empty;
162+
public object? ChipIcon { get; set; }
124163
public bool ChipRemovable { get; set; }
164+
public string ChipText { get; set; } = string.Empty;
165+
public string ChipThemeColor { get; set; } = string.Empty;
125166
}
126167
}
127168
````

‎components/chiplist/overview.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ The <a href="https://www.telerik.com/blazor-ui/chiplist" target="_blank">Blazor
5252

5353
## Data Binding
5454

55-
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).
55+
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).
5656

5757
## Selection
5858

@@ -68,7 +68,7 @@ You can use the built-in events of the Blazor ChipList to react to chip selectio
6868

6969
## Appearance
7070

71-
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)
71+
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).
7272

7373
## ChipList Parameters
7474

@@ -82,7 +82,7 @@ The table below lists the ChipList parameters. Also check the [ChipList API Refe
8282
| `AriaLabelledBy` | `string` | Maps to the `area-labelledby` attribute. Use this parameter to reference another element to define its accessible name. |
8383
| `Class` | `string` | An additional CSS class for the `<div class="k-chip-list">` element. Use it to [customize the component styles and override the theme](slug:themes-override). |
8484
| `Data` | `IEnumerable<TItem>` | The collection of the items that will be rendered as chips. |
85-
| `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. |
85+
| `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. |
8686
| `RemoveIcon` | `object` | Defines the icon that will be rendered if the `Removable` parameter is set to `true`. |
8787

8888
## Next Steps

0 commit comments

Comments
 (0)