diff --git a/common-features/icons.md b/common-features/icons.md index 5f6c7a631d..0f024e305b 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -71,17 +71,26 @@ The `TelerikFontIcon` component can show a [built-in Telerik Blazor font icon](# | `Flip` | `IconFlip` `enum`
(`None`) | The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. | | `Icon` | `FontIcon` `enum` | Any of the [built-in Telerik Blazor font icons](#icons-list). This parameter takes precedence over `IconClass`, if both are set. | | `IconClass` | `string` | Custom CSS class for a custom third-party icon. Do not use together with the `Icon` parameter. | -| `Size` | `string`
(`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.Icon.Size` class. | -| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.Icon.ThemeColor` class properties. By default, the icon color will inherit the current CSS text color. | +| `Size` | `string`
(`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.FontIcon.Size` class. | +| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.FontIcon.ThemeColor` class properties. By default, the icon color will inherit the current CSS text color. | >caption Using TelerikFontIcon ````CSHTML - + + + + + ```` ### Set Custom Font Icon Size @@ -100,10 +109,10 @@ Our font icons are designed on a 16px grid base. For better display quality, use
- +
- + ```` ### Render Font Icons with HTML @@ -133,18 +142,18 @@ The `TelerikSvgIcon` component can show a [built-in Telerik Blazor SVG icon](#ic |---|---|---| | `Flip` | `IconFlip` `enum`
(`None`) | The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. | | `Icon` | `ISvgIcon` | Assign a property of the `SvgIcon` static class to use any of the [built-in Telerik Blazor font icons](#icons-list). Alternatively, [implement your own custom SVG Icon class](#implement-custom-svg-icon-classes). | -| `Size` | `string`
(`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.Icon.Size` class. | +| `Size` | `string`
(`"md"`) | Any of the predefined icon sizes (from `"xs"` to `"xxxl"`). It is possible to set the parameter value to raw strings such as `"lg"`, `"md"` or `"sm"`. However, we recommend using the properties of the static `ThemeConstants.SvgIcon.Size` class. | | `ChildContent` | `RenderFragment` | The HTML markup of a custom SVG icon. Do not use together with `Icon`. | -| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.Icon.ThemeColor` class properties. | +| `ThemeColor` | `string` | Any of the predefined icon colors. Use the static `ThemeConstants.SvgIcon.ThemeColor` class properties. | >caption Using TelerikSvgIcon ````CSHTML - + ```` ### Render Custom SVG Icons with HTML diff --git a/components/button/icons.md b/components/button/icons.md index 5fe60bfa1d..73e83eb609 100644 --- a/components/button/icons.md +++ b/components/button/icons.md @@ -12,22 +12,37 @@ position: 2 You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Button to illustrate its purpose by using the `Icon` parameter. +The `Icon` parameter type is `object` and it accepts: + +* a member of the `FontIcon` enum +* a property of the static `SvgIcon` class +* a `string` that is a CSS class for a custom icon + >caption How to use icons in Telerik Button ````CSHTML Font Icon + SVG Icon + +Custom Icon + + ```` >tip If you don't add text to the button, the button will center the icon on all sides. ->note Images used as icons should generally be small enough to fit in a line of text - the button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options: +>note Images used as icons should generally be small enough to fit in a line of text. The button is an inline element and is not designed for large images. If you want to use big icon buttons, consider one of the following options: > -> * defining a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`, -> * or attaching an `@onclick` handler to an icon/`span`/`img` element instead of using a button, -> * or adding your own HTML inside the button, something like: `some text` - +> * Define a `Class` on the button that provides `height` and `width`. The width and height can be set in `px` sufficient to accommodate the icon or to `auto`, +> * Attach an `@onclick` handler to an icon/`span`/`img` element instead of using a button, +> * Adding your own HTML inside the button, something like: `some text` ## See Also - * [Button Overview]({%slug components/button/overview%}) +* [Button Overview]({%slug components/button/overview%}) diff --git a/components/drawer/icons.md b/components/drawer/icons.md index 85c2107700..ae461018c4 100644 --- a/components/drawer/icons.md +++ b/components/drawer/icons.md @@ -12,51 +12,55 @@ position: 22 You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Drawer item by assigning an `object` to the `IconField` parameter. ->caption How to use icons in Telerik Drawer +If the icon property name in the Drawer model is `Icon`, there is no need to set the `IconField` parameter. -````CSHTML -@* This example shows how to add icons to the Drawer items *@ +>caption How to use icons in the Telerik Drawer +````CSHTML - Toggle drawer + Toggle drawer
Selected Item: @SelectedItem?.Text
+ + @code { - bool DrawerExpanded { get; set; } = true; - TelerikDrawer DrawerRef { get; set; } - DrawerItem SelectedItem { get; set; } - IEnumerable Data { get; set; } = new List() - { - new DrawerItem { Text = "Current Location", TelerikIcon = FontIcon.Pin}, - new DrawerItem { Text = "Navigation", TelerikIcon = FontIcon.Globe}, - new DrawerItem { Text = "Favourite Locations", TelerikIcon = FontIcon.Star}, - }; + private TelerikDrawer DrawerRef { get; set; } + + private bool DrawerExpanded { get; set; } = true; + + private DrawerItem SelectedItem { get; set; } + + private IEnumerable Data { get; set; } = new List() + { + new DrawerItem { Text = "Current Location", Icon = FontIcon.Pin }, + new DrawerItem { Text = "Navigation", Icon = FontIcon.Globe }, + new DrawerItem { Text = "Favorites", Icon = "my-icon" }, + }; public class DrawerItem { public string Text { get; set; } - public FontIcon? TelerikIcon { get; set; } + public object Icon { get; set; } } } ```` ->caption The result from the code snippet above - -![icons](images/drawer-icons.png) - - - ## See Also - * [Drawer Overview]({%slug drawer-overview%}) +* [Drawer Overview]({%slug drawer-overview%}) diff --git a/components/drawer/images/drawer-icons.png b/components/drawer/images/drawer-icons.png deleted file mode 100644 index 14ebe2e93d..0000000000 Binary files a/components/drawer/images/drawer-icons.png and /dev/null differ diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index e7d0ba681a..7e4e6f01d2 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -32,6 +32,7 @@ The section describes the available features and their use. The `GridCommandButton` tag offers the following features: * `Command` - the command that will be invoked. Can be one of the built-in commands (see below), or a custom command name. +* `Icon` - the command button icon, which can be a font icon, an SVG icon or a custom icon. Use in the same way as the [Button component `Icon`]({%slug button-icons%}). * `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event]({%slug components/grid/editing/overview%}). Cancelling it will prevent the built-in CRUD event from firing. * `ShowInEdit` - a boolean property indicating whether the button is only visible while the user is editing/inserting data. * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags. diff --git a/components/menu/icons.md b/components/menu/icons.md index 63a2528d5a..767ecae261 100644 --- a/components/menu/icons.md +++ b/components/menu/icons.md @@ -10,53 +10,57 @@ position: 15 # Menu Icons -You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Menu item to illustrate its purpose by using the `IconField` parameter. +You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Menu item to illustrate its purpose by using the `IconField` parameter. The Menu also supports custom icons. ->caption How to use icons in Telerik Menu +If the icon property in the Menu model is called `Icon`, there is no need to set the `IconField` parameter. + +>caption How to use icons in the Telerik Menu ````CSHTML + IconField="@(nameof(MenuItem.Icon))"> + + @code { - public List MenuData { get; set; } + public List MenuData { get; set; } protected override void OnInitialized() { - GenerateMenuData(); - } - - public void GenerateMenuData() - { - MenuData = new List() + MenuData = new List() { - new MenuModel() + new MenuItem() { - Text = "Mail Icon", - TelerikFontIcon = FontIcon.Envelop + Text = "Font Icon", + Icon = FontIcon.Envelop }, - new MenuModel() + new MenuItem() { - Text = "Wrench Icon", - TelerikFontIcon = FontIcon.Wrench, + Text = "SVG Icon", + Icon = SvgIcon.Wrench, }, - new MenuModel() + new MenuItem() { - Text = "Video Icon", - TelerikFontIcon = FontIcon.FileVideo + Text = "Custom Icon", + Icon = "my-icon" } }; } - public class MenuModel + public class MenuItem { public string Text { get; set; } - public FontIcon? TelerikFontIcon { get; set; } + public object Icon { get; set; } } } ```` ## See Also - * [Menu Overview]({%slug components/menu/overview%}) +* [Menu Overview]({%slug components/menu/overview%}) diff --git a/components/panelbar/icons.md b/components/panelbar/icons.md index abf9941402..2e91e8f03a 100644 --- a/components/panelbar/icons.md +++ b/components/panelbar/icons.md @@ -10,94 +10,94 @@ position: 15 # PanelBar Icons -You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the PanelBar item by assigning a `string` to the `IconField` parameter. +You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the PanelBar item by assigning a `string` to the `IconField` parameter. The PanelBar also supports custom icons. ->caption How to use icons in Telerik PanelBar +If the icon property name in the PanelBar model is `Icon`, there is no need to define the `IconField` parameter. -````CSHTML -@* This example shows how to add icons to the PanelBar items *@ +>caption How to use icons in the Telerik PanelBar -<
- - - - - -
+````CSHTML + + + + + + + @code { public List Items { get; set; } - public class PanelBarItem + protected override void OnInitialized() { - public int Id { get; set; } - public string Text { get; set; } - public int? ParentId { get; set; } - public bool HasChildren { get; set; } - public FontIcon? MyIcon { get; set; } - } + Items = new List(); - private List LoadFlatData() - { List items = new List(); - items.Add(new PanelBarItem() - { - Id = 1, - Text = "Company", - ParentId = null, - HasChildren = false, - MyIcon = FontIcon.Home - }); - - items.Add(new PanelBarItem() - { - Id = 2, - Text = "Contact us", - ParentId = null, - HasChildren = true, - MyIcon = FontIcon.Book - }); - - items.Add(new PanelBarItem() - { - Id = 3, - Text = "Email", - ParentId = 2, - HasChildren = false, - MyIcon = FontIcon.Envelop - }); - - items.Add(new PanelBarItem() - { - Id = 4, - Text = "LinkedIn", - ParentId = 2, - HasChildren = false, - MyIcon = FontIcon.LinkedinBox - }); - - items.Add(new PanelBarItem() - { - Id = 5, - Text = "Audio", - ParentId = null, - HasChildren = false, - MyIcon = FontIcon.FileAudio - }); - - return items; + Items.Add(new PanelBarItem() + { + Id = 1, + Text = "Home (Font Icon)", + ParentId = null, + HasChildren = false, + Icon = FontIcon.Home + }); + + Items.Add(new PanelBarItem() + { + Id = 2, + Text = "Contact Us (SVG Icon)", + ParentId = null, + HasChildren = true, + Icon = SvgIcon.Book + }); + + Items.Add(new PanelBarItem() + { + Id = 3, + Text = "Email", + ParentId = 2, + HasChildren = false, + Icon = FontIcon.Envelop + }); + + Items.Add(new PanelBarItem() + { + Id = 4, + Text = "LinkedIn", + ParentId = 2, + HasChildren = false, + Icon = FontIcon.LinkedinBox + }); + + Items.Add(new PanelBarItem() + { + Id = 5, + Text = "Custom Icon", + ParentId = null, + HasChildren = false, + Icon = "my-icon" + }); + + base.OnInitialized(); } - protected override void OnInitialized() + public class PanelBarItem { - Items = LoadFlatData(); - - base.OnInitialized(); + public int Id { get; set; } + public string Text { get; set; } + public int? ParentId { get; set; } + public bool HasChildren { get; set; } + public object Icon { get; set; } } } ```` ## See Also - * [PanelBar Overview]({%slug panelbar-overview%}) +* [PanelBar Overview]({%slug panelbar-overview%}) diff --git a/components/treeview/icons.md b/components/treeview/icons.md index 34d35d6ff3..3a409db1c5 100644 --- a/components/treeview/icons.md +++ b/components/treeview/icons.md @@ -10,70 +10,71 @@ position: 15 # TreeView Icons -You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the TreeView item to illustrate its purpose by using the `IconField` parameter. +You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the TreeView item to illustrate its purpose by using the `IconField` parameter. The TreeView also supports custom icons. +If the icon property name in the TreeView model is `Icon`, there is no need to define the `IconField` parameter. ->caption How to use icons in Telerik TreeView +>caption How to use icons in the Telerik TreeView ````CSHTML -@* This example shows how to add icons to the TreeView items *@ - - + + + @code { - public List TreeViewData { get; set; } + private List TreeViewData { get; set; } protected override void OnInitialized() { - GenerateData(); - } - - public void GenerateData() - { - TreeViewData = new List(); + TreeViewData = new List(); - TreeViewData.Add(new TreeViewModel() - { - Id = 1, - Text = "Company", - ParentId = null, - HasChildren = true, - TelerikIcon = FontIcon.Home - }); + TreeViewData.Add(new TreeItem() + { + Id = 1, + Text = "Font Icon", + ParentId = null, + HasChildren = true, + Icon = FontIcon.Home + }); - TreeViewData.Add(new TreeViewModel() - { - Id = 2, - Text = "Contact us", - ParentId = 1, - HasChildren = false, - TelerikIcon = FontIcon.Envelop - }); + TreeViewData.Add(new TreeItem() + { + Id = 2, + Text = "SVG Icon", + ParentId = 1, + HasChildren = false, + Icon = FontIcon.Envelop + }); - TreeViewData.Add(new TreeViewModel() - { - Id = 3, - Text = "Audio", - ParentId = null, - TelerikIcon = FontIcon.FileAudio - }); + TreeViewData.Add(new TreeItem() + { + Id = 3, + Text = "Custom Icon", + ParentId = 1, + Icon = "my-icon" + }); } - public class TreeViewModel + public class TreeItem { public int Id { get; set; } public string Text { get; set; } public bool HasChildren { get; set; } public int? ParentId { get; set; } - public FontIcon? TelerikIcon { get; set; } + public object Icon { get; set; } } } ```` ## See Also - * [TreeView Overview]({%slug treeview-overview%}) +* [TreeView Overview]({%slug treeview-overview%}) diff --git a/upgrade/breaking-changes/4-0-0.md b/upgrade/breaking-changes/4-0-0.md index dd74171159..ca39320530 100644 --- a/upgrade/breaking-changes/4-0-0.md +++ b/upgrade/breaking-changes/4-0-0.md @@ -10,13 +10,48 @@ position: 1 ## Common Changes -### Icons +This section applies to changes to multiple components. -#### Icon +## Icons -The `Icon` parameter type changes to `object` from `string` to facilitate the addition of [Telerik Font and Svg Icons]({%slug general-information/font-icons%}). +### Icon -#### ImageUrl +The `Icon` parameter type changes from `string` to `object` to facilitate the addition of [Telerik Font and Svg Icons]({%slug general-information/font-icons%}). + +To use built-in Telerik icons, [register the new icon namespaces]({%slug general-information/font-icons%}#how-icons-work) - `Telerik.FontIcons` and/or `Telerik.SvgIcons`. + +To define custom icon classes inline, use `Icon="@( "my-icon-class" )"`. + + + + + + + + + + + + +
UI for Blazor 3.7.0UI for Blazor 4.0.0
+

+<TelerikButton Icon="save"> Font Icon Button <TelerikButton />
+
+<GridCommandButton Icon="save"> Font Icon Command Button <GridCommandButton />
+
+<TelerikButton IconClass="fa fa-foo"> Custom Icon Button <TelerikButton />
+
+ 		+

+<TelerikButton Icon="@FontIcon.Save"> Font Icon Button <TelerikButton />
+
+<GridCommandButton Icon="@FontIcon.Save"> Font Icon Command Button <GridCommandButton />
+
+<TelerikButton Icon="@( "fa fa-foo" )"> Custom Icon Button <TelerikButton />
+
+
+ +### ImageUrl Removed the `ImageUrl` parameter, use the [Icon](#icon) parameter instead. @@ -36,7 +71,7 @@ List of affected components: * [TreeView]({%slug treeview-overview%}) * [Wizard]({%slug wizard-overview%}) -#### IconClass +### IconClass Removed the `IconClass` parameter, use the [Icon](#icon) parameter instead. @@ -56,7 +91,7 @@ List of affected components: * [TreeView]({%slug treeview-overview%}) * [Wizard]({%slug wizard-overview%}) -#### SpriteClass +### SpriteClass Removed the `SpriteClass` parameter, use the [Icon](#icon) parameter instead. @@ -69,7 +104,7 @@ List of affected components: * [ToggleButton]({%slug togglebutton-overview%}) -### Shape Parameter +## Shape Parameter Removed the `Shape` parameter from: @@ -78,7 +113,7 @@ Removed the `Shape` parameter from: * [SplitButton]({%slug splitbutton-overview%}) * [ToggleButton]({%slug togglebutton-overview%}) -### Stretched enum Value +## Stretched enum Value * [Card Actions `Layout`]({%slug card-actions%}#layout) * [Dialog Action `ButtonsLayout`]({%slug dialog-action-buttons%}) @@ -86,11 +121,11 @@ Removed the `Shape` parameter from: * [Scheduler popup edit form `ButtonsLayout`]({%slug scheduler-edit-popup-customization%}#edit-form-customization) * [TreeList popup edit form `ButtonsLayout`]({%slug treelist-editing-popup%}#edit-form-customization) ->caption Stretched enum value in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Stretched enum value in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -157,15 +192,15 @@ Removed the `Shape` parameter from:
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### Async Method Suffix +## Async Method Suffix Added an `Async` suffix to the name of asynchronous methods. ->caption Method signatures in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Method signatures in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -206,15 +241,17 @@ await TreeListRef.SetStateAsync(desiredState); ## Component Changes -### Button +This section describes changes per component. + +## Button - Renamed the `Hidden` parameter to `Visible`. ->caption Visible parameter in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Visible parameter in UI for Blazor up to version 3.7.0 and after version 4.0.0
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
- + @@ -233,19 +270,19 @@ await TreeListRef.SetStateAsync(desiredState);
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### Carousel +## Carousel - Removed the `OnTimerTick` method. -### Drawer +## Drawer - Changed the values in the `DrawerPosition` enum from `Left` and `Right` to `Start` and `End`. ->caption DrawerPosition enum values in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption DrawerPosition enum values in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -266,19 +303,19 @@ await TreeListRef.SetStateAsync(desiredState);
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### DropDownList +## DropDownList * Removed the `DefaultItem` parameter, use the `DefaultText` parameter instead. -### Form +## Form - The Form columns can have different widths -### Gantt +## Gantt - Renamed `` to ``. -### Grid +## Grid - [FilterRow]({%slug grid-filter-row%}) uses `CompositeFilterDescriptor` instead of `FilterDescriptor`. - Removed default filter descriptors in the state when the Grid `FilterMode` is set to `FilterMenu`. @@ -287,15 +324,15 @@ await TreeListRef.SetStateAsync(desiredState); - Renamed `` to ``. -### MaskedTextBox +## MaskedTextBox - Changed the signature of the `PlaceHolder` parameter to `Placeholder`. ->caption Placeholder parameter in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Placeholder parameter in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -314,15 +351,15 @@ await TreeListRef.SetStateAsync(desiredState);
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### TextArea +## TextArea - Changed the signature of the `PlaceHolder` parameter to `Placeholder`. ->caption Placeholder parameter in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Placeholder parameter in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -341,15 +378,15 @@ await TreeListRef.SetStateAsync(desiredState);
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### TextBox +## TextBox - Changed the signature of the `PlaceHolder` parameter to `Placeholder`. ->caption Placeholder parameter in UI for Blazor up to version 3.8.0 and after version 4.0.0 +>caption Placeholder parameter in UI for Blazor up to version 3.7.0 and after version 4.0.0 - + @@ -368,11 +405,11 @@ await TreeListRef.SetStateAsync(desiredState);
UI for Blazor 3.8.0UI for Blazor 3.7.0 UI for Blazor 4.0.0
-### Toolbar +## Toolbar - Changed the default value of the `Adaptive` parameter from `false` to `true`. -### TreeList +## TreeList - Removed default filter descriptors in the state when the TreeList `FilterMode` is set to `FilterMenu`. - Removed `Primary` parameter from the ``.