Index

最小限の使用方法

最小限必要なものは以下の内容です。

• [BlazorPath]属性を付与したクラスを用意します。この際、クラス定義にはpartial属性が必要です。
• そのクラス内のメンバーとしてconst string型の定数を定義します。
• メンバーの属性として、[Item("DisplayName")]属性を付与します。

BlazorPathHelperは上記の内容を満たすクラス定義を自動で捜査して、メニュー構造データを生成します。

using BlazorPathHelper;

[BlazorPath]
public partial class WebPaths
{
    [Item("TopPage")]
    public const string Home = "/";
}

生成されたコード

// <auto-generated />
public partial class WebPaths
{
  public static readonly BlazorPathMenuItem[] MenuItem = [
    new BlazorPathMenuItem(){
      Name = "TopPage",
      Path = "/",
      Children = []
      // 省略
    },
  ];
}

サブメニューの追加

URL的に階層構造を持つ場合、サブメニューが自動で生成されます。

例として、以下のような階層構造を持つメニューを考えます。

├── TopPage
├── Sample1
│   ├── Sample1C1
│   └── Sample1C2
│       └── Sample1C2C1
├── Sample2
│   └── Sample2C1
└── Sample3

この場合、以下のようなクラス定義を行います。特別な処理は必要ありません。

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";
}

生成されるコード（抜粋）

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プロパティに格納されます。

メニューを実際に表示する

最も単純な例では以下のような構造になります。

@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 または第一引数	メニューの表示名。リソースのキー名を指定することでi10nの対応可能。	変数名
Description	Description	メニューの説明文	NULL
Icon	Icon または ジェネリクスで指定(クラスの場合)	メニューのアイコン	NULL
Children	(自動生成)	メニューの子要素	空の配列