Skip to content

Commit 81cb062

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
committed
Icon articles docs (#71)
* docs(menu): icons article * chore(menu): updates on icons article * chore(menu): improvements on icons article * docs(drawer): added icons article * chore(drawer): improvements on icons article * chore(drawer): code snippet improvements * docs(treeview): added icons article and minor changes to Drawer and Menu icon articles * chore(docs): improvements on icons articles * chore(drawer): improvements on icons article * chore(drawer): updates to Icons articles * chore(drawer): fix icon article * chore(menu): Improvements on Icons article * chore(treeview): improvements on Icons article * chore(docs): changed icon urls * chore: icon articles fixes - blurry images, typos, image url Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent 8135475 commit 81cb062

File tree

9 files changed

+250
-4
lines changed

9 files changed

+250
-4
lines changed

‎common-features/font-icons.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ You can find the full list of available icons in the [Kendo UI Web Font Icons Li
3434
3535
@* <TelerikIcon Icon="audio" /> *@ @* This would also render the same audio icon *@
3636
37-
<TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the pag, you can use your own CSS classes and font icon fonts *@
37+
<TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the page, you can use your own CSS classes and font icon fonts *@
3838
39-
<TelerikIcon ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
39+
<TelerikIcon ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
4040
````
4141

4242
>caption The result from the snippet above

‎components/button/icons.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ The following example shows how to use an image from a URL, a sprite image, and
2828
````CSHTML
2929
<TelerikButton SpriteClass="k-icon netherlandsFlag">Sprite</TelerikButton>
3030
<TelerikButton Icon="@IconName.Filter">Font Icon</TelerikButton>
31-
<TelerikButton ImageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Image URL</TelerikButton>
31+
<TelerikButton ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png">Image URL</TelerikButton>
3232
3333
<style>
3434
/* the sprite for the first button is defined through a CSS rule matchin its Class */
3535
.netherlandsFlag {
36-
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
36+
background-image: url("https://docs.telerik.com/blazor-ui/images/flags.png");
3737
background-position: 0 -64px;
3838
}
3939
</style>

‎components/drawer/icons.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Icons
3+
page_title: Drawer for Blazor | Icon
4+
description: Icons and images in the Drawer for Blazor
5+
slug: drawer-icons
6+
tags: telerik,blazor,drawer,icon,iconclass,image
7+
published: True
8+
position: 22
9+
---
10+
11+
# Drawer Icons
12+
13+
You can put an image, an icon class or a font icon for each item in the Drawer to illustrate its purpose for your end users. To apply them, use the following properties:
14+
15+
* for a [Telerik font icon]({%slug general-information/font-icons%}), point the `IconField` parameter of the component to a `string` field of the model that contains the corresponding icon name.
16+
17+
* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
18+
19+
* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
20+
21+
The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
22+
23+
>caption How to use icons in Telerik Drawer
24+
25+
````CSHTML
26+
@* This example shows how to add icons to the Drawer items *@
27+
28+
<TelerikDrawer Data="@Data"
29+
IconField="@nameof(DrawerItem.TelerikIcon)"
30+
MiniMode="true"
31+
@bind-Expanded="@DrawerExpanded"
32+
Mode="DrawerMode.Push"
33+
@ref="@DrawerRef"
34+
@bind-SelectedItem="@SelectedItem">
35+
<Content>
36+
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu">Toggle drawer</TelerikButton>
37+
<div class="m-5">
38+
Selected Item: @SelectedItem?.Text
39+
</div>
40+
</Content>
41+
</TelerikDrawer>
42+
43+
@code {
44+
bool DrawerExpanded { get; set; } = true;
45+
TelerikDrawer<DrawerItem> DrawerRef { get; set; }
46+
DrawerItem SelectedItem { get; set; }
47+
IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>()
48+
{
49+
new DrawerItem { Text = "Current Location", TelerikIcon = IconName.Pin},
50+
new DrawerItem { Text = "Navigation", TelerikIcon = IconName.Globe},
51+
new DrawerItem { Text = "Favourite Locations", TelerikIcon = IconName.Star},
52+
};
53+
54+
public class DrawerItem
55+
{
56+
public string Text { get; set; }
57+
public string TelerikIcon { get; set; }
58+
}
59+
}
60+
````
61+
62+
>caption The result from the code snippet above
63+
64+
![icons](images/drawer-icons.png)
65+
66+
67+
68+
## See Also
69+
70+
* [Drawer Overview]({%slug drawer-overview%})

‎components/drawer/images/drawer-icons.png‎

27.4 KB
Loading

‎components/menu/icons.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
title: Icons
3+
page_title: Menu for Blazor | Icon
4+
description: Icons and images in the Menu for Blazor
5+
slug: menu-icons
6+
tags: telerik,blazor,menu,icon,iconclass,image
7+
published: True
8+
position: 15
9+
---
10+
11+
# Menu Icons
12+
13+
You can put an image, icon class or a font icon for each item in the Menu to illustrate its purpose for your end users. To apply them, use the following properties:
14+
15+
* for a [Telerik font icon]({%slug general-information/font-icons%}), point the `IconField` parameter of the component to a string field of the model that contains the corresponding icon name.
16+
17+
* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
18+
19+
* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
20+
21+
The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
22+
23+
>caption How to use icons in Telerik Menu
24+
25+
````CSHTML
26+
@* This example shows how to add icons or images to menu items
27+
Make sure that you also refernce the OpenIconic font that comes with the Blazor App template to see the custom font icon *@
28+
29+
<TelerikMenu Data="@MenuData"
30+
IconField="@nameof(MenuModel.TelerikIcon)"
31+
ImageUrlField="@nameof(MenuModel.MyImage)"
32+
IconClassField="@nameof(MenuModel.MyIconClass)">
33+
</TelerikMenu>
34+
35+
@code {
36+
public List<MenuModel> MenuData { get; set; }
37+
38+
protected override void OnInitialized()
39+
{
40+
GenerateMenuData();
41+
}
42+
43+
public void GenerateMenuData()
44+
{
45+
MenuData = new List<MenuModel>()
46+
{
47+
new MenuModel()
48+
{
49+
Text = "IconField",
50+
TelerikIcon = IconName.Email
51+
},
52+
new MenuModel()
53+
{
54+
Text = "IconClassField",
55+
MyIconClass = "oi oi-wrench",
56+
},
57+
new MenuModel()
58+
{
59+
Text = "ImageUrlField",
60+
MyImage = "https://docs.telerik.com/blazor-ui/images/video.png"
61+
}
62+
};
63+
}
64+
65+
public class MenuModel
66+
{
67+
public string Text { get; set; }
68+
public string TelerikIcon { get; set; }
69+
public string MyImage { get; set; }
70+
public string MyIconClass { get; set; }
71+
}
72+
}
73+
````
74+
75+
>caption The result from the code snippet above
76+
77+
![icons](images/icons.png)
78+
79+
## See Also
80+
81+
* [Menu Overview]({%slug components/menu/overview%})

‎components/menu/images/icons.png‎

2.4 KB
Loading

‎components/treeview/icons.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Icons
3+
page_title: TreeView for Blazor | Icon
4+
description: Icons and images in the TreeView for Blazor
5+
slug: treeview-icons
6+
tags: telerik,blazor,treeview,icon,iconclass,image
7+
published: True
8+
position: 10
9+
---
10+
11+
# TreeView Icons
12+
13+
You can put an image, icon class or a font icon for each item in the TreeView to illustrate its purpose for your end users. To apply them, use the following properties:
14+
15+
* for a [Telerik font icon]({%slug general-information/font-icons%}), point the `IconField` parameter of the component to a string field of the model that contains the corresponding icon name.
16+
17+
* for a raster image, point the `ImageUrlField` parameter of the component to a `string` field of the model that contains the url to the icon (relative or absolute).
18+
19+
* for a custom font icon class, point the `IconClassField` parameter of the component to a `string` field of the model that contains the desired CSS class list which provides the required rules (like font name and glyph symbol). Make sure to also reference the desired font in your app and to use its own recommendations.
20+
21+
The `IconClassField` and `ImageUrlField` are rendered, respectively, as `<span class="the custom class" />` and as `<img src="the-image-src" />`
22+
23+
>caption How to use icons in Telerik TreeView
24+
25+
````CSHTML
26+
@* This example shows how to add icons or images to the TreeView items
27+
Make sure that you also refernce the OpenIconic font that comes with the Blazor App template to see the custom font icon *@
28+
29+
<TelerikTreeView Data="@TreeViewData">
30+
<TreeViewBindings>
31+
<TreeViewBinding IconClassField="@nameof(TreeViewModel.MyIconClass)"
32+
ImageUrlField="@nameof(TreeViewModel.MyImageUrl)"
33+
IconField="@nameof(TreeViewModel.TelerikIcon)" />
34+
</TreeViewBindings>
35+
</TelerikTreeView>
36+
37+
@code {
38+
public List<TreeViewModel> TreeViewData { get; set; }
39+
40+
protected override void OnInitialized()
41+
{
42+
GenerateData();
43+
}
44+
45+
public void GenerateData()
46+
{
47+
TreeViewData = new List<TreeViewModel>();
48+
49+
TreeViewData.Add(new TreeViewModel()
50+
{
51+
Id = 1,
52+
Text = "Company",
53+
ParentId = null,
54+
HasChildren = true,
55+
TelerikIcon = "home"
56+
});
57+
58+
TreeViewData.Add(new TreeViewModel()
59+
{
60+
Id = 2,
61+
Text = "Contact us",
62+
ParentId = 1,
63+
HasChildren = false,
64+
MyIconClass = "oi oi-envelope-closed"
65+
});
66+
67+
TreeViewData.Add(new TreeViewModel()
68+
{
69+
Id = 3,
70+
Text = "Audio",
71+
ParentId = null,
72+
MyImageUrl = "https://docs.telerik.com/blazor-ui/images/speaker.png"
73+
});
74+
}
75+
76+
public class TreeViewModel
77+
{
78+
public int Id { get; set; }
79+
public string Text { get; set; }
80+
public bool HasChildren { get; set; }
81+
public int? ParentId { get; set; }
82+
public string TelerikIcon { get; set; }
83+
public string MyIconClass { get; set; }
84+
public string MyImageUrl { get; set; }
85+
}
86+
}
87+
````
88+
89+
>caption The result from the code snippet above, after expanding the first node
90+
91+
![icons](images/icons.png)
92+
93+
## See Also
94+
95+
* [TreeView Overview]({%slug components/treeview/overview%})

‎components/treeview/images/icons.png‎

2.43 KB
Loading

‎images/flags.png‎

1.86 KB
Loading

0 commit comments

Comments
 (0)