@@ -12,6 +12,8 @@ position: 10
1212
1313You 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