跳转至

Index

最小使用方法

最小限需要的内容如下：

  • 准备一个带有 [BlazorPath] 属性的类。在类定义中需要使用 partial 属性。
  • 在该类中定义一个 const string 类型的常量作为成员。
  • 作为成员的属性，添加 [Item("DisplayName")] 属性。

BlazorPathHelper 会自动查找满足上述条件的类定义，并生成菜单结构数据。

WebPaths.cs
1
2
3
4
5
6
7
8
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
    [Item("TopPage")]
    public const string Home = "/";
}
生成的代码
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// <auto-generated />
public partial class WebPaths
{
  public static readonly BlazorPathMenuItem[] MenuItem = [
    new BlazorPathMenuItem(){
      Name = "TopPage",
      Path = "/",
      Children = []
      // 省略
    },
  ];
}

添加子菜单

当URL具有层次结构时，子菜单会自动生成。

例如，考虑以下具有层次结构的菜单：

Text Only
1
2
3
4
5
6
7
8
├── TopPage
├── Sample1
│   ├── Sample1C1
│   └── Sample1C2
│       └── Sample1C2C1
├── Sample2
│   └── Sample2C1
└── Sample3

在这种情况下，可以进行如下类定义，不需要特殊处理。

WebPaths.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
    [Item("TopPage")]
    public const string Home = "/";
    [Item("Sample1")]
    public const string Sample1 = "/sample1";
    [Item("Sample1C1")]
    public const string Sample1C1 = "/sample1/child1";
    [Item("Sample1C2")]
    public const string Sample1C2 = "/sample1/child2";
    [Item("Sample1C2C1")]
    public const string Sample1C2C1 = "/sample1/child2/child1";
    [Item("Sample2")]
    public const string Sample2 = "/sample2";
    [Item("Sample2C1")]
    public const string Sample2C1 = "/sample2/child1";
    [Item("Sample3")]
    public const string Sample3 = "/sample3";
}
生成的代码（摘录）
Auto Generated Code
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public partial class WebPaths
{
  public static readonly BlazorPathMenuItem[] MenuItem = [
    new BlazorPathMenuItem(){
      Name = "TopPage",
      Path = "/",
      Children = [
        new BlazorPathMenuItem(){
          Name = "Sample1",
          Path = "/sample1",
          Children = [
            new BlazorPathMenuItem(){
              Name = "Sample1C1",
              Path = "/sample1/child1",
              Children = []
            },
            new BlazorPathMenuItem(){
              Name = "Sample1C2",
              Path = "/sample1/child2",
              Children = [
                new BlazorPathMenuItem(){
                  Name = "Sample1C2C1",
                  Path = "/sample1/child2/child1",
                  Children = []
                }
              ]
            }
          ]
        }
      ]
    },
    new BlazorPathMenuItem(){
      Name = "Sample2",
      Path = "/sample2",
      Children = [
        new BlazorPathMenuItem(){
          Name = "Sample2C1",
          Path = "/sample2/child1",
          Children = []
        }
      ]
    },
    new BlazorPathMenuItem(){
      Name = "Sample3",
      Path = "/sample3",
      Children = []
    }
  ];
}

生成的子元素会存储在 Children 属性中。

实际显示菜单

最简单的例子如下：

NavMenu.razor
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@using BlazorPathHelper

<ul>
@foreach(var item in MenuItems)
{
  <li><a href="@item.Path">@item.Name</a></li>
  @if(item.HasChildren)
  {
    <NavMenu MenuItems="item.Children"/>
  }
}
</ul>

@code {
  [Parameter]
  public BlazorPathMenuItem[] MenuItems { get; set; } = WebPaths.MenuItem;
}

当然，也可以根据各个组件调整设计。详情请参阅 各框架示例。

自定义菜单项

请参阅 自定义菜单项。

生成的属性详情

以下属性会作为 BlazorPathMenuItem 类生成。详情请参阅 BlazorPathMenuItem 和 ItemAttribute。

BlazorPathMenuItem 的属性 ItemAttribute 的指定方法 说明 默认值
Key (自动生成) 菜单全局唯一的键（字符串） ー
Index (自动生成) 菜单全局的索引（数字） ー
GroupKey Group 表示菜单层次结构的字符串。同一个 GroupKey 属于同一组。 从 URL 定义自动判别（例：/foo/bar 则为 /foo）
GroupLevel (自动生成) 菜单的层次级别。最上层为 0。 ー
GroupIndex (自动生成) 子菜单内的索引（数字） ー
Path (自动生成) 菜单的链接地址 const string 变量的值
Name Name 或第一个参数 菜单的显示名称。通过指定资源的键名可以支持国际化。 变量名
Description Description 菜单的描述文本 NULL
Icon Icon 或通过泛型指定（类的情况） 菜单的图标 NULL
Children (自动生成) 菜单的子元素 空数组