Skip to content

Commit 0035cec

Browse files
docs(menu): fix orientation example and screenshot
1 parent 33838a7 commit 0035cec

File tree

2 files changed

+18
-10
lines changed

2 files changed

+18
-10
lines changed
-47.5 KB
Loading

components/menu/orientation.md

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

1313
You can control the orientation of the Menu for Blazor so that it orders its items horizontally or vertically.
1414

15+
The default orientation is horizontal.
16+
1517
>caption Changing the orientation of a menu
1618
1719
![](images/menu-change-orientation.gif)
@@ -20,13 +22,19 @@ You can control the orientation of the Menu for Blazor so that it orders its ite
2022
2123
````CSHTML
2224
@using Telerik.Blazor.Components.Menu
25+
@using Telerik.Blazor
2326
24-
<TelerikMenu Data="@MenuItems" OnClick="@OnClick">
25-
</TelerikMenu>
27+
<select @bind=@orientation>
28+
<option value=@MenuOrientation.Horizontal>Horizontal</option>
29+
<option value=@MenuOrientation.Vertical>Vertical</option>
30+
</select>
2631
27-
Last clicked item: @ClickedItem?.Text
32+
<TelerikMenu Data="@MenuItems" Orientation="@orientation">
33+
</TelerikMenu>
2834
2935
@code {
36+
MenuOrientation orientation;
37+
3038
public List<MenuItem> MenuItems { get; set; }
3139
3240
public class MenuItem
@@ -39,34 +47,34 @@ Last clicked item: @ClickedItem?.Text
3947
protected override void OnInitialized()
4048
{
4149
MenuItems = new List<MenuItem>()
42-
{
50+
{
4351
new MenuItem()
4452
{
4553
Text = "Share",
46-
Icon = "k-i-share",
54+
Icon = IconName.Share,
4755
Items = new List<MenuItem>()
48-
{
56+
{
4957
new MenuItem()
5058
{
5159
Text = "FaceBook",
52-
Icon = "k-i-facebook"
60+
Icon = IconName.Facebook
5361
},
5462
new MenuItem()
5563
{
5664
Text = "LinkedIn",
57-
Icon = "k-i-linkedin"
65+
Icon = IconName.Linkedin
5866
},
5967
new MenuItem()
6068
{
6169
Text = "Twitter",
62-
Icon = "k-i-twitter"
70+
Icon = IconName.Twitter
6371
},
6472
}
6573
},
6674
new MenuItem()
6775
{
6876
Text = "Map Location",
69-
Icon = "k-i-marker-pin"
77+
Icon = IconName.MarkerPin
7078
}
7179
};
7280

0 commit comments

Comments
 (0)