Skip to content

Commit dd6a7bb

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(icons): more components
1 parent 4d81467 commit dd6a7bb

File tree

5 files changed

+186
-217
lines changed

5 files changed

+186
-217
lines changed

‎components/drawer/icons.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ position: 22
1010

1111
# Drawer Icons
1212

13-
You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Breadcrumb item by assigning a `string` to the `IconField` parameter.
13+
You can add a [Telerik Font or SVG icon]({%slug general-information/font-icons%}) to the Drawer item by assigning a `string` to the `IconField` parameter.
1414

1515
>caption How to use icons in Telerik Drawer
1616

‎components/menu/overview.md‎

Lines changed: 136 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,136 @@
1-
---
2-
title: Overview
3-
page_title: Menu Overview
4-
description: Get an overview of the Menu for Blazor, and learn how to use it through practical examples.
5-
slug: components/menu/overview
6-
tags: telerik,blazor,menu,overview
7-
published: True
8-
position: 0
9-
---
10-
11-
# Blazor Menu Overview
12-
13-
The <a href="https://www.telerik.com/blazor-ui/menu" target="_blank">Blazor Menu component</a> displays data (flat or hierarchical) in a traditional menu-like structure. In addition to built-in navigation capabilities, you can browse through the items and their children, define [templates]({%slug components/menu/templates%}) for the individual nodes, render text and icons/images, and respond to [events]({%slug components/menu/events%}).
14-
15-
## Creating Blazor Menu
16-
17-
1. Use the `TelerikMenu` tag to add the component to your razor page.
18-
19-
1. Populate the `Data` property with the collection of items that you want to appear in the menu. The Menu will automatically recognize property names like `Id`, `ParentId`, `Text` and a few others. Otherwise, [use bindings to configure custom property names]({%slug components/menu/data-binding/overview%}#data-bindings).
20-
21-
>caption Basic Menu with hierarchical data binding and built-in navigation
22-
23-
````CSHTML
24-
@*Use a Menu to navigate between views*@
25-
26-
<TelerikMenu Data="@MenuItems"/>
27-
28-
@code {
29-
public List<MenuItem> MenuItems { get; set; }
30-
31-
public class MenuItem
32-
{
33-
public string Text { get; set; }
34-
public string Url { get; set; }
35-
public List<MenuItem> Items { get; set; }
36-
}
37-
38-
protected override void OnInitialized()
39-
{
40-
MenuItems = new List<MenuItem>()
41-
{
42-
new MenuItem()
43-
{
44-
Text = "Company", // items that don't have a URL will not render links
45-
Items = new List<MenuItem>()
46-
{
47-
new MenuItem()
48-
{
49-
Text = "Overview",
50-
Url = "company/overview"
51-
},
52-
new MenuItem()
53-
{
54-
Text = "Events",
55-
Url = "company/events"
56-
},
57-
new MenuItem()
58-
{
59-
Text = "Careers",
60-
Url = "company/careers"
61-
}
62-
}
63-
},
64-
new MenuItem()
65-
{
66-
Text = "Services",
67-
Items = new List<MenuItem>()
68-
{
69-
new MenuItem()
70-
{
71-
Text = "Consulting",
72-
Url = "consultingservices"
73-
},
74-
new MenuItem()
75-
{
76-
Text = "Education",
77-
Url = "education"
78-
}
79-
}
80-
}
81-
};
82-
83-
base.OnInitialized();
84-
}
85-
}
86-
````
87-
88-
## Data Binding
89-
90-
To show any items, the Blazor Menu requires a data source that you can provide through the `Data` property. The Menu allows you to display the items both as flat data and hierarchically. [Read more about the Blazor Menu data binding...]({%slug components/menu/data-binding/overview%})
91-
92-
## Navigate Views
93-
94-
A menu is often used to list pages, views, or sections in an application so the user can navigate through them. To do that with a menu, you have two options:
95-
96-
* Use the built-in `UrlField` in the [bound data]({%slug components/menu/data-binding/overview%}#data-bindings) to populate the URLs in the anchors that the menu will generate if you provide a URL for the given item. This approach is demonstrated in the [Creating Blazor Menu](#creating-blazor-menu) example.
97-
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
98-
99-
[Read more about the Blazor Menu navigation...]({%slug menu-navigation%})
100-
101-
## Orientation
102-
103-
The Blazor Menu allows you to control its orientation and display the items horizontally or vertically. [Read more about the Blazor Menu orientation...]({%slug components/menu/orientation%})
104-
105-
## Templates
106-
107-
You can use the functionality of the built-in templates and customize what is rendered in the items. [Read more about the Blazor Menu templates...]({%slug components/menu/templates%})
108-
109-
## Menu Icons
110-
111-
To illustrate the purpose of each menu item, the Blazor Menu allows you to add images, icon classes, or font icons. [Read more about the Blazor Menu icons...]({%slug menu-icons%})
112-
113-
## Events
114-
115-
The Blazor Menu generates events that you can handle and further customize its behavior. [Read more about the Blazor Menu events...]({%slug components/menu/events%})
116-
117-
## Menu Parameters
118-
119-
The following table lists Context Menu parameters, which are not related to other features on this page. Check the [Menu API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1) for a full list of properties, methods and events.
120-
121-
| Attribute | Type and Default&nbsp;Value | Description |
122-
| --- | --- | --- |
123-
| `Class` | `string` | Renders additional CSS class to the main wrapping element of the component. Use it to apply custom styles or [override the theme]({%slug themes-override%}). |
124-
| `CloseOnClick` - `bool` | Determines whether the Menu popups should close when they are clicked.
125-
126-
127-
## Next Steps
128-
129-
* [Binding the Menu to Data]({%slug components/menu/data-binding/overview%})
130-
131-
* [Using the Menu to Navigate between Pages]({%slug menu-navigation%})
132-
133-
## See Also
134-
135-
* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
136-
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)
1+
---
2+
title: Overview
3+
page_title: Menu Overview
4+
description: Get an overview of the Menu for Blazor, and learn how to use it through practical examples.
5+
slug: components/menu/overview
6+
tags: telerik,blazor,menu,overview
7+
published: True
8+
position: 0
9+
---
10+
11+
# Blazor Menu Overview
12+
13+
The <a href="https://www.telerik.com/blazor-ui/menu" target="_blank">Blazor Menu component</a> displays data (flat or hierarchical) in a traditional menu-like structure. In addition to built-in navigation capabilities, you can browse through the items and their children, define [templates]({%slug components/menu/templates%}) for the individual nodes, render text and icons/images, and respond to [events]({%slug components/menu/events%}).
14+
15+
## Creating Blazor Menu
16+
17+
1. Use the `TelerikMenu` tag to add the component to your razor page.
18+
19+
1. Populate the `Data` property with the collection of items that you want to appear in the menu. The Menu will automatically recognize property names like `Id`, `ParentId`, `Text` and a few others. Otherwise, [use bindings to configure custom property names]({%slug components/menu/data-binding/overview%}#data-bindings).
20+
21+
>caption Basic Menu with hierarchical data binding and built-in navigation
22+
23+
````CSHTML
24+
@*Use a Menu to navigate between views*@
25+
26+
<TelerikMenu Data="@MenuItems"/>
27+
28+
@code {
29+
public List<MenuItem> MenuItems { get; set; }
30+
31+
public class MenuItem
32+
{
33+
public string Text { get; set; }
34+
public string Url { get; set; }
35+
public List<MenuItem> Items { get; set; }
36+
}
37+
38+
protected override void OnInitialized()
39+
{
40+
MenuItems = new List<MenuItem>()
41+
{
42+
new MenuItem()
43+
{
44+
Text = "Company", // items that don't have a URL will not render links
45+
Items = new List<MenuItem>()
46+
{
47+
new MenuItem()
48+
{
49+
Text = "Overview",
50+
Url = "company/overview"
51+
},
52+
new MenuItem()
53+
{
54+
Text = "Events",
55+
Url = "company/events"
56+
},
57+
new MenuItem()
58+
{
59+
Text = "Careers",
60+
Url = "company/careers"
61+
}
62+
}
63+
},
64+
new MenuItem()
65+
{
66+
Text = "Services",
67+
Items = new List<MenuItem>()
68+
{
69+
new MenuItem()
70+
{
71+
Text = "Consulting",
72+
Url = "consultingservices"
73+
},
74+
new MenuItem()
75+
{
76+
Text = "Education",
77+
Url = "education"
78+
}
79+
}
80+
}
81+
};
82+
83+
base.OnInitialized();
84+
}
85+
}
86+
````
87+
88+
## Data Binding
89+
90+
To show any items, the Blazor Menu requires a data source that you can provide through the `Data` property. The Menu allows you to display the items both as flat data and hierarchically. [Read more about the Blazor Menu data binding...]({%slug components/menu/data-binding/overview%})
91+
92+
## Navigate Views
93+
94+
A menu is often used to list pages, views, or sections in an application so the user can navigate through them. To do that with a menu, you have two options:
95+
96+
* Use the built-in `UrlField` in the [bound data]({%slug components/menu/data-binding/overview%}#data-bindings) to populate the URLs in the anchors that the menu will generate if you provide a URL for the given item. This approach is demonstrated in the [Creating Blazor Menu](#creating-blazor-menu) example.
97+
* Use a [Template]({%slug components/menu/templates%}) to generate the desired links (e.g., `NavLink` components) with your own code to enable fine-tuning.
98+
99+
[Read more about the Blazor Menu navigation...]({%slug menu-navigation%})
100+
101+
## Orientation
102+
103+
The Blazor Menu allows you to control its orientation and display the items horizontally or vertically. [Read more about the Blazor Menu orientation...]({%slug components/menu/orientation%})
104+
105+
## Templates
106+
107+
You can use the functionality of the built-in templates and customize what is rendered in the items. [Read more about the Blazor Menu templates...]({%slug components/menu/templates%})
108+
109+
## Menu Icons
110+
111+
To illustrate the purpose of each menu item, the Blazor Menu allows you to add images, icon classes, or font icons. [Read more about the Blazor Menu icons...]({%slug menu-icons%})
112+
113+
## Events
114+
115+
The Blazor Menu generates events that you can handle and further customize its behavior. [Read more about the Blazor Menu events...]({%slug components/menu/events%})
116+
117+
## Menu Parameters
118+
119+
The following table lists Context Menu parameters, which are not related to other features on this page. Check the [Menu API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1) for a full list of properties, methods and events.
120+
121+
| Attribute | Type and Default&nbsp;Value | Description |
122+
| --- | --- | --- |
123+
| `Class` | `string` | Renders additional CSS class to the main wrapping element of the component. Use it to apply custom styles or [override the theme]({%slug themes-override%}). |
124+
| `CloseOnClick` - `bool` | Determines whether the Menu popups should close when they are clicked.
125+
126+
127+
## Next Steps
128+
129+
* [Binding the Menu to Data]({%slug components/menu/data-binding/overview%})
130+
131+
* [Using the Menu to Navigate between Pages]({%slug menu-navigation%})
132+
133+
## See Also
134+
135+
* [Live Demo: Menu](https://demos.telerik.com/blazor-ui/menu/index)
136+
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMenu-1)

0 commit comments

Comments
 (0)