Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arika0093/blazorpathhelper
BlazorPathHelper is a library that assists in managing URL paths within Blazor projects.
https://github.com/arika0093/blazorpathhelper
blazor dotnet
Last synced: about 1 month ago
JSON representation
BlazorPathHelper is a library that assists in managing URL paths within Blazor projects.
- Host: GitHub
- URL: https://github.com/arika0093/blazorpathhelper
- Owner: arika0093
- License: apache-2.0
- Created: 2024-11-26T15:46:48.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-07T13:22:36.000Z (about 1 month ago)
- Last Synced: 2024-12-07T14:20:03.540Z (about 1 month ago)
- Topics: blazor, dotnet
- Language: C#
- Homepage: https://www.nuget.org/packages/BlazorPathHelper/
- Size: 236 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.ja.md
- License: LICENSE
Awesome Lists containing this project
README
# BlazorPathHelper
[English](./README.md) | [日本語](./README.ja.md)
[](https://www.nuget.org/packages/BlazorPathHelper/) 
 
`BlazorPathHelper` は Blazor プロジェクトでURLパスを管理するのを手助けするライブラリです。
## 主な機能
* パス定義からURLビルダーおよびメニュー項目リストを自動生成
* シンプルな実装で各種フレームワークのメニュー生成に対応可能
## Getting Started
### 導入
Blazorプロジェクト内に `BlazorPathHelper` をインストールします。
```bash
dotnet add package BlazorPathHelper
```
### 下準備
`WebPaths.cs` ファイルを作成します。
```csharp
using BlazorPathHelper;
[BlazorPath]
public partial class WebPaths
{
[BlazorPathItem("Home")]
public const string Index = "/";
[BlazorPathItem("Sample1")]
public const string Sample = "/sample";
[BlazorPathItem("Sample1-a")]
public const string SampleChild = "/sample/child";
[BlazorPathItem("Sample2")]
public const string Counter = "/counter";
public const string CounterWithState = "/counter/{count:int}";
}
```
すると、以下のようなクラス定義が自動で生成されます。
```csharp
//
// 元のクラスに追記されます
public partial class WebPaths
{
// URLビルドを行う際に便利なヘルパー関数
public partial class Helper
{
public static string Index() => "/";
public static string Sample() => "/sample";
public static string SampleChild() => "/sample/child";
public static string Counter() => "/counter";
public static string CounterWithState(int count) => string.Format("/counter/{0}", count);
}
// メニュー項目を動的に作成するのに便利な配列
public static readonly BlazorMenuItem[] MenuItem = [
new BlazorPathMenuItem(){
Name = "Home", // メニュー名。標準では変数名
Path = "/", // ページのパス
Children = [] // 子メニュー
// その他、メニューを生成するのに便利なプロパティを自動生成
},
new BlazorPathMenuItem(){
Name = "Sample1",
Path = "/sample",
// URLを解析して、よしなに子メニューを生成する
Children = [
new BlazorPathMenuItem(){
Name = "Sample1-a",
Path = "/sample/child",
Children = []
}
]
},
new BlazorPathMenuItem(){
Name = "Sample2",
Path = "/counter",
// パラメータを持つページはメニューに表示されない
Children = []
}
];
}
```
最後に、`razor` ページ側の定義を `@page` から `@attribute`+`Route` に変更します。
```razor
@* @page "/counter/{count:int}" *@
@attribute [Route(WebPaths.CounterWithState)]
```
## 使い方
### URLビルダー
```csharp
// URLを生成
var url = WebPaths.Helper.CounterWithState(1); // -> "/counter/1"
// ページ遷移
// @inject NavigationManager Nav
Nav.NavigateTo(url);
// With query
Nav.NavigateTo(
Nav.GetUriWithQueryParameter(url, "q", "test"), // -> "/counter/1?q=test"
forceLoad: true
);
```
### メニュー生成
`NavMenu.razor` と `NavMenuItem.razor` を作成します。
```razor
@* NavMenu.razor *@
@foreach (var menuItem in WebPaths.MenuItem)
{
}
```
```razor
@* NavMenuItem.razor *@
@using BlazorPathHelper
@* メニュー項目を再帰的に表示するコンポーネント *@
@* key属性にはMenuItem.Indexが利用可能 *@
@MenuItem.Name
@* 子メニュー *@
@foreach(var childMenuItem in MenuItem.Children)
{
}
@code {
[Parameter, EditorRequired]
public BlazorPathMenuItem MenuItem { get; set; } = default!;
}
```
### メニューのカスタマイズ
`BlazorPathItem` 属性を利用してメニュー表示をカスタマイズできます。
```csharp
[BlazorPath]
public partial class WebPaths
{
// メニューから非表示にしたい場合、Visible = false を指定
[BlazorPathItem(Visible = false)]
public const string Index = "/";
// ページ名とアイコン（cssクラス）を指定
[BlazorPathItem("SampleA", Icon = "fas fa-cog")]
public const string Sample = "/sample";
[BlazorPathItem("SampleA-1", Icon = "fas fa-star")]
public const string SampleChild = "/sample/child";
// 説明文を追加する場合は、第二引数で指定可能
[BlazorPathItem("SampleA-2", "Description of the A-2 page")]
public const string SampleWithDesc = "/sample/child2";
// URL的に繋がりがないが子要素として認識させたい場合は、Groupを指定
[BlazorPathItem("SampleA-3", Group = Sample)]
public const string SampleChild3 = "/sample-3";
// どことも繋がっていない奥深くの階層を最上位メニューに表示したい場合は、Group = "/" を指定
[BlazorPathItem("SampleB", Group = Index)]
public const string SuperInnerItem = "/hoge/fuga/piyo";
// 上記のように指定しておけば、その子ページもメニューに表示される
[BlazorPathItem("SampleB-1")]
public const string SuperInnerItemChild = "/hoge/fuga/piyo/child";
// 多言語対応の場合、nameofを使ってリソースキーを指定しておき、コンポーネント内でIStringLocalizerを使う
[BlazorPathItem(nameof(Resources.SampleTitle))]
public const string SampleLocalize = "/sample-l10n";
[BlazorPathItem(nameof(Resources.SampleTitle), nameof(Resources.SampleDesc))]
public const string SampleLocalizeWithDesc = "/sample-l10n-plus";
}
```
### 各フレームワークごとの実装例
#### Blazor Template
標準のテンプレートにはアイコンが含まれていないため、`index.html` に以下のように追記します。
```html
```
そして、以下のように使います。
```csharp
// WebPaths.cs
[BlazorPath]
public partial class WebPaths
{
[BlazorPathItem(Name="Home", Icon="bi-house-door-fill")]
public const string Home = "/";
[BlazorPathItem(Name="Sample1", Icon="bi-1-circle-fill")]
public const string Sample1 = "/sample1";
[BlazorPathItem(Name="Sample2", Icon="bi-2-circle-fill")]
public const string Sample2 = "/sample2";
[BlazorPathItem(Name="Sample3", Icon="bi-3-circle-fill")]
public const string Sample3 = "/sample3";
}
```
```razor
@* NavMenuItem.razor *@
@using BlazorPathHelper
@code {
[Parameter, EditorRequired]
public BlazorPathMenuItem MenuItem { get; set; } = default!;
}
```
実装例は [Example.Plain](./examples/Example.Plain/) にあります。
#### FLuentUI
FluentUIの`Icon`はそのままだと指定できないため、名前部分を取り出して指定します。
```csharp
using BlazorPathHelper;
// そのまま書くと長いので、using static で短縮
using static Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size20;
[BlazorPath]
public partial class WebPaths
{
// BlazorPathItemでアイコンを指定
// ---------------------------------
[BlazorPathItem("Home")]
public const string Home = "/";
[BlazorPathItem("Sample1")]
public const string Sample1 = "/sample1";
[BlazorPathItem("Sample2")]
public const string Sample2 = "/sample2";
[BlazorPathItem("Sample3")]
public const string Sample3 = "/sample3";
}
```
そして、以下のように使います。
```razor
@* NavMenuItem.razor *@
@using BlazorPathHelper
@if(MenuItem.Children.Length > 0)
{
@foreach(var childMenuItem in MenuItem.Children)
{
}
}
else
{
@MenuItem.Name
}
@code {
[Parameter, EditorRequired]
public BlazorPathMenuItem MenuItem { get; set; } = default!;
}
```
実装例は [Example.FluentUI](./examples/Example.FluentUI/) にあります。
#### AntBlazor
標準のテンプレート(Pro)にはオブジェクトからメニューを生成する機能が付属していますが、この定義の生成を簡略化することができます。
```csharp
// Layout/BasicLayout.razor.cs
protected override async Task OnInitializedAsync()
{
_menuData = ConverterMenuDataItem(WebPaths.MenuItem);
}
private MenuDataItem[] ConverterMenuDataItem(BlazorPathMenuItem[] items)
{
return items.Select(item => new MenuDataItem {
Path = item.Path,
Name = item.Name,
Key = item.Index.ToString(),
Icon = item.Icon.ToString(),
Children = item.Children.Length > 0
? ConverterMenuDataItem(item.Children) : null
}).ToArray();
}
```
あとは他と同じです。
```csharp
// WebPaths.cs
using BlazorPathHelper;
// ReSharper disable MemberCanBePrivate.Global
// ReSharper disable ClassNeverInstantiated.Global
namespace Example.AntBlazor;
[BlazorPath]
public partial class WebPaths
{
[BlazorPathItem("Home", Icon = "home")]
public const string Home = "/";
[BlazorPathItem("Sample1", Icon = "folder")]
public const string Sample1 = "/sample1";
[BlazorPathItem("Sample2", Icon = "folder")]
public const string Sample2 = "/sample2";
[BlazorPathItem("Sample3", Icon = "file")]
public const string Sample3 = "/sample3";
}
```
実装例は [Example.AntBlazor](./examples/Example.AntBlazor/) にあります。