Skip to content

Commit 06fd797

Browse files
dimodidimodi
committed
Add FillModeField
1 parent a9b2d6a commit 06fd797

File tree

2 files changed

+104
-66
lines changed

2 files changed

+104
-66
lines changed

‎components/chiplist/appearance.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,20 @@ You can control the appearance of the chips in the ChipList by setting the follo
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) for each [chip in the ChipList](slug:chiplist-bound).
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).
2222

2323
## FillMode
2424

25-
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:
2626

2727
| Class members | Manual declarations |
2828
|------------|--------|
2929
|`Solid` <br /> default value|`solid`|
3030
|`Outline`|`outline`|
3131

32-
>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
3335
3436
````RAZOR
3537
@* 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
8890
|`Large`|`lg`|
8991
|`Full`|`full`|
9092

91-
>caption The built-in values of the Rounded attribute
93+
>caption Using ChipList Rounded
9294
9395
````RAZOR
9496
@* 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
146148
| `Medium` <br /> default value |`md`|
147149
| `Large` |`lg`|
148150

149-
>caption The built-in chip sizes
151+
>caption Using ChipList Size
150152
151153
````RAZOR
152154
@{

‎components/chiplist/data-bind.md‎

Lines changed: 97 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -16,117 +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,
34-
ThemeColor = ThemeConstants.Chip.ThemeColor.Base
60+
Text = "Solid Base",
61+
Icon = SvgIcon.Sparkles
3562
},
3663
new ChipModel()
3764
{
38-
Text = "Video",
39-
Icon = SvgIcon.FileVideo,
40-
Disabled = false,
41-
Removable = false,
42-
ThemeColor = ThemeConstants.Chip.ThemeColor.Warning
65+
Text = "Outline Info",
66+
Icon = SvgIcon.QuestionCircle,
67+
ThemeColor = ThemeConstants.Chip.ThemeColor.Info,
68+
FillMode = ThemeConstants.Chip.FillMode.Outline
4369
},
4470
new ChipModel()
4571
{
46-
Text = "Image",
47-
Icon = SvgIcon.FileImage,
48-
Disabled = true,
49-
Removable = false,
50-
ThemeColor = ThemeConstants.Chip.ThemeColor.Info
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
83+
},
84+
new ChipModel()
85+
{
86+
Text = "Solid Error Disabled",
87+
Icon = SvgIcon.XOutline,
88+
ThemeColor = ThemeConstants.Chip.ThemeColor.Error,
89+
Disabled = true
5190
}
5291
};
5392
5493
public class ChipModel
5594
{
56-
public string Text { get; set; } = string.Empty;
57-
public ISvgIcon? Icon { get; set; }
5895
public bool Disabled { get; set; }
96+
public string FillMode { get; set; } = string.Empty;
97+
public object? Icon { get; set; }
5998
public bool Removable { get; set; }
99+
public string Text { get; set; } = string.Empty;
60100
public string ThemeColor { get; set; } = string.Empty;
61101
}
62102
}
63103
````
64104

65-
### Data Binding Schema
105+
### Custom Property Names
66106

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

87109
>caption ChipList with custom model property names
88110
89111
````RAZOR
90112
<TelerikChipList Data="@ChipListData"
91-
TextField="@nameof(ChipModel.ChipText)"
92-
IconField="@nameof(ChipModel.ChipIcon)"
93113
DisabledField="@nameof(ChipModel.ChipDisabled)"
94-
RemovableField="@nameof(ChipModel.ChipRemovable)">
95-
</TelerikChipList>
96-
97-
@[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)" />
98119
99120
@code {
100-
private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
121+
private List<ChipModel> ChipListData { get; set; } = new()
122+
{
101123
new ChipModel()
102124
{
103-
ChipText = "Audio (SVG icon)",
104-
ChipIcon = SvgIcon.FileAudio,
105-
ChipDisabled = false,
106-
ChipRemovable = true
125+
ChipText = "Solid Base",
126+
ChipIcon = SvgIcon.Sparkles
127+
},
128+
new ChipModel()
129+
{
130+
ChipText = "Outline Info",
131+
ChipIcon = SvgIcon.QuestionCircle,
132+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Info,
133+
ChipFillMode = ThemeConstants.Chip.FillMode.Outline
107134
},
108135
new ChipModel()
109136
{
110-
ChipText = "Video (Font icon)",
111-
ChipIcon = FontIcon.FileVideo,
112-
ChipDisabled = false,
113-
ChipRemovable = false
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
114148
},
115149
new ChipModel()
116150
{
117-
ChipText = "Image (disabled)",
118-
ChipIcon = SvgIcon.FileImage,
119-
ChipDisabled = true,
120-
ChipRemovable = false
151+
ChipText = "Solid Error Disabled",
152+
ChipIcon = SvgIcon.XOutline,
153+
ChipThemeColor = ThemeConstants.Chip.ThemeColor.Error,
154+
ChipDisabled = true
121155
}
122156
};
123157
124158
public class ChipModel
125159
{
126-
public string ChipText { get; set; }
127-
public object ChipIcon { get; set; }
128160
public bool ChipDisabled { get; set; }
161+
public string ChipFillMode { get; set; } = string.Empty;
162+
public object? ChipIcon { get; set; }
129163
public bool ChipRemovable { get; set; }
164+
public string ChipText { get; set; } = string.Empty;
165+
public string ChipThemeColor { get; set; } = string.Empty;
130166
}
131167
}
132168
````

0 commit comments

Comments
 (0)