Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能

最近、Ant Design Blazor コンポーネントライブラリにマルチタブコンポーネントを実装する需要が高まっています。そこで、週末を利用して、`Tabs` コンポーネントをベースにした `ReuseTabs` コンポーネントを Blazor の組み込みルーティングコンポーネントと組み合わせて実装しました。

最近、Ant Design Blazor コンポーネントライブラリにマルチタブコンポーネントを実装する需要が高まっています。そこで、週末を利用して、 TabsコンポーネントをベースにしたReuseTabsコンポーネントを Blazor の組み込みルーティングコンポーネントと組み合わせて実装しました。

序文

Blazor は、.NET の最新のフロントエンドフレームワークです。WebAssembly または SignalR (WebSocket) に基づいてフロントエンドアプリケーションを構築できます。WebAssembly ホスティングモデルに基づく Blazor は、オフラインでも実行できます。さらに、.NET クラスライブラリを共有できるため、従来の JS ベースのフロントエンドとバックエンドの分離モデルと比較して、コード量を 1/3 に削減できます。 .NET 開発者は、使い慣れたテクノロジと経験を活用してフロントエンドアプリケーションを開発できるようになりました。異なるテクノロジスタックを持つ開発者間の通信コストも大幅に削減され、生産性がさらに向上します。

つまり、Blazor は .NET 開発者にとってもう 1 つの生産性向上テクノロジーなのです。

Blazor コミュニティエコシステムのオープンソース UI コンポーネントライブラリを使用することで、よく使用されるコンポーネントがカプセル化され、ユーザーは JS や CSS を記述する必要がなくなり、コミュニティの .NET 開発者から高い評価を得ています。現在、Blazor をベースに構築されたエンタープライズレベルのアプリケーションが多数導入・リリースされており、企業に徐々に認知されつつあります。

文章

複数のタブを多重化するルーティングとは

この記事のタイトルにあるルート再利用は、AngularのRouteReuseStrategyの概念であり、中国語コミュニティでは「マルチタブページ」と呼ばれることが多いです。その主な機能は、ページを切り替えるときにページの状態を維持することであり、現在表示されているページの状態は、任意にページを切り替えることで復元できます。これは通常、より複雑なバックエンド管理システムで使用されます。フォームをフィルタリングした後、ユーザーはレコードの詳細ページに入り、元の検索条件、ページ数などを維持したままリストページに戻ることができます。または、フォームに入力するときに、正しい情報を表示するために別のページに移動する必要があります。フォームに戻っても、入力した内容は失われません。

Blazor は C# コードを再利用できるという利点があるため、バックグラウンド管理システムの構築によく使用され、タブの使用が一般的な要求となっています。ただし、公式の Blazor チームはそのようなコンポーネントを直接提供していないため、実装するにはコミュニティのパートナーが必要です。

しかし、コミュニティ内のいくつかのオープンソースコンポーネントライブラリを見ると、それらはすべて一般的な Tabs タブコンポーネントのみを実装しており、切り替えパネルとしてのみ使用できます。「マルチタブ」機能を実装するには、サポートされていないか、独自のメニューコンポーネントとレイアウトコンポーネントに直接的または間接的に依存し、ページファイルパスに依存し、ページコンポーネントタイプを結合し、最後にリフレクションを使用してページコンポーネントを作成する必要があります...

マルチタブ機能は実装されていますが、実装はあまりエレガントではありません。結合度が非常に高く、コンポーネントライブラリ自身のフレームワークレイアウトでのみ使用でき、個別に使用することはできません。また、リフレクションのパフォーマンスも良くなく、規約に従ってページを配置する必要があり、ユーザーにさまざまな制限を課しています。

もちろん、コミュニティ内で流通しているより認知度の高いソリューションとして、 BlazorDemoMultiPagesTabプロジェクトがあります。 Blazor の組み込みルーティングコンポーネントを組み合わせてルーティングマルチタブを実装するプロトタイプを提供します。しかし、問題は、これが単なるデモであるということです。原理を実装しているだけです。コードは乱雑です。作者はそれを整理したり、コンポーネントにパッケージ化したりしていません。自分のプロジェクトで使用したい場合は、間違いなく頭を悩ませることになります。

Ant Design Blazor の ReuseTabs コンポーネント

最近、Ant Design Blazor コンポーネントライブラリにマルチタブコンポーネントを実装する需要が高まっています。そこで、週末の時間を利用して、 BlazorDemoMultiPagesTabで提供されているアイデアに基づいて、 TabsコンポーネントをベースにしたReuseTabsコンポーネントを実装し、Blazor の組み込みルーティングコンポーネントと組み合わせました。

ReuseTabsコンポーネントには、 ReuseTabsRouteViewとReuseTabsという 2 つのサブコンポーネントのみが含まれています。ReuseTabsRouteView ReuseTabsRouteView組み込みのRouteViewコンポーネントから継承し、ページコンポーネントの状態を維持したり破棄したりできるようにページコンポーネントのライフサイクルを引き継ぐ役割を担います。ReuseTabs ReuseTabsタブの表示と操作を担当します。また、メニューやレイアウトなどの他のコンポーネントに依存しないため、どの Blazor アプリケーションでも直接使用でき、他のコンポーネントライブラリともうまく連携して使用できます。

主な特徴

適用するには2つのコードを変更するだけです
タグ名の静的または動的な設定をサポート
ルートと同期し、 <a>タグ、 NavigationMangerなどのさまざまなリダイレクト方法をサポートします。

以下では、dotnet new テンプレートプロジェクトを例に、基本的な使用方法を紹介します。

使い方

まず、Ant Design Blazor ドキュメントの説明に従って、AntDesign パッケージとサービス登録をインストールします。

次に、プロジェクト内のApp.razorファイルを変更し、 RouteView ReuseTabsRouteViewに置き換えます。

<ルーター AppAssembly="@typeof(Program).Assembly">
    <コンテキスト="routeData">が見つかりました
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </見つかりました>
    ...
</ルーター>

プロジェクト内のMainLayout.razorファイルを変更します。

@LayoutComponentBase を継承します

<div class="page">
    <div class="サイドバー">
        <ナビゲーションメニュー />
    </div>

    <div class="main">
- <div class="top-row px-4">
- <a href="http://blazor.net" rel="external nofollow" target="_blank" class="ml-md-auto">概要</a>
- </div>
- <div class="content px-4">
- @体
- </div>
+ <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
    </div>
</div>

タグ名をカスタマイズする2つの方法

プレーンテキストの場合は、ページコンポーネントでReuseTabsPageTitle属性を使用できます。

@ページ "/counter"
+ @attribute [ReuseTabsPageTitle("カウンター")]

別のコンポーネントを追加したり、ページコンテンツからタイトルを取得したりするなど、テンプレートを使用して動的なタブ名を取得する必要がある場合は、 IReuseTabsPageインターフェイスを実装する必要があります。

@ページ "/"
+ @implements IReuseTabsPage

<h1>こんにちは、世界！</h1>

@コード{
+ パブリック RenderFragment GetPageTitle() =>
+ @<div>
+ <Icon Type="home"/> ホーム
+ </div>
+ ;
}

注: ReuseTabsコンポーネントは現在、バージョン 0.9.0 のデイリービルドパッケージに含まれています。正式にリリースされる前に、ドキュメントに記載されている方法を参照してインストールする必要があります。

後続の機能

現在、このコンポーネントは基本的な機能のみを実装しており、一部の機能は後続の計画に含まれています。

右クリックメニュー
コードモードが閉じられました
キャッシュ戦略
ルーティングガードと権限制御

追記

Blazorコミュニティは1年以上前から複数タブの実現を求めてきましたが、ここ数日でようやく実現しました。国内外のコミュニティは歓喜し、大きな達成感を感じています。

実装の詳細については、興味のある学生は Ant Design Blazor のソースコード (数個のファイルのみ) を確認できます。もちろん、興味を持っている学生がたくさんいれば、詳しく紹介する記事を書くこともできます。

実際、コミュニティ内のより多くの愛好家が立ち上がり、経験を共有し、オープンソースプロジェクトに貢献することで、コミュニティが健全に発展することを願っています。
Ant Design Blazor は 1 年以上開発されてきましたが、正直に言うと、他のコンポーネントライブラリプロジェクトの作者と比べると、私自身の時間の投資と貢献はそれほど多くありません。コードの貢献に加えて、私のエネルギーの大部分はコミュニティの運営に費やされています。
プロジェクトを宣伝し、通行人をユーザーに変え、ユーザーを貢献者に変え、より多くの人がそれぞれ少しずつのエネルギーを費やして全員の貢献の効果を達成できるようにすることが、オープンソースプロジェクトを長期間アクティブに保つための長期戦略です。

最後に、ユーザーと貢献者の皆様のご支援に心より感謝申し上げます。彼らの問題、事例、PR はどれも私たちの肯定であり、私たちが頑張り続ける原動力です。

参考リンク

https://github.com/BlazorPlus/BlazorDemoMultiPagesTab

https://github.com/ant-design-blazor/demo-reuse-tabs

ナイトリービルド

Ant Design Blazor コンポーネントライブラリの複数タブのルーティング再利用に関するこの記事はこれで終わりです。Ant Design Blazor コンポーネントライブラリの関連コンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: