インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

Ignite UI for Blazor - バージョン21.2 最新情報

f:id:cleverdog:20211217164650p:plain

こんにちは、インフラジスティックス・ジャパンです。 本記事では Ignite UI for Blazor の最新バージョン21.2 で追加された新機能についてご紹介します。

弊社のどの製品であっても最も多くのお客様にご利用いただいているデータグリッドの機能強化を行ったほか、新たに17のコンポーネントを追加いたしました。

.NET 6 サポート

これまでもインフラジスティックスは .NET の最新リリースに追従しサポートを行って参りましたが、.NET 6 に関しても同様です。Ignite UI for Blazor 21.2は、.NET 6 をフルサポートしています。

Blazor グリッド

最新バージョン21.2 で新たにデータグリッドに追加された機能は以下の通りです。

フィルター行

以前よりデータグリッドではフィルタリング機能をサポートしていましたが、フィルタリング操作はExcelスタイルの、列のオプションダイアログに限定されていました。今回、より少ない操作でフィルタリング機能が利用出来るように、データグリッドコンポーネントに全く新しいフィルター行を追加しました。これにより、インラインでのフィルタリングが可能になり、エンドユーザーにとってより良いフィルタリング体験が得られるようになりました。特定のカラムをフィルタリングできるだけでなく、前方一致・後方一致・部分一致などの条件を選択することもできます。内蔵のフィルター条件が要件を満たさない場合は、独自のフィルター条件を作成することができます。

f:id:cleverdog:20211217165548j:plain

インタラクティブなグルーピング

フィルター行と同じように、以前のデータグリッドでは列によるグループ化を行うために列のオプションダイアログから操作を行う必要がありました。今回のアップデートで、ドラッグ・アンド・ドロップによる直感的な操作でグルーピングを行うことができるようになりました。グループ化の階層構造に関してもデータグリッドのヘッダーで容易に視認することが可能です。

f:id:cleverdog:20211217165607g:plain

セルのマージ機能

Excel のように、異なる行の隣接するデータセルの値が同じ場合、該当のセルを結合することで視認性が良くなります。これはデータグリッドをご利用になる開発者、ユーザーから良く挙がる機能要件のひとつで、今回のバージョンアップでセルのマージ機能に対応いたしました。

f:id:cleverdog:20211217165633j:plain

レイアウトの保存、読み込み

エンドユーザーはデータグリッドを扱う際に、列の移動やサイズ変更またはピン固定、ソートやフィルター、グループ化などを行うことによって、自分にとってデータを見やすい、取り扱いやすい形で自由にレイアウト可能です。今回のバージョンアップでは、そのように変更したデータグリッドの状態を保存、読み込み出来る機能が追加されました。 データグリッドのレイアウトを DataGrid.SaveLayout メソッドで json 形式で保存し、保存したレイアウトを DataGrid.LoadLayout メソッドでデータグリッドに読み込むことで簡単に実現いただけます。

Blazor 追加コントール

ここからは Ignite UI for Blazor に今回新たに追加されたコントロールに関して紹介していきます。

Blazor アバター

Ignite UI for Blazor アバターコンポーネントは、アプリケーションにイニシャル表示やユーザー画像、マテリアルアイコンを追加するのに役立ちます。

f:id:cleverdog:20211217154452j:plain

Blazor バッジ

Ignite UI for Blazor バッジは、アプリケーションにおいて視覚的な通知を行う際に、アバターやナビゲーションメニューなどと一緒に使用されるコンポーネントです。バッジは基本的に、成功、警告、またはエラーを伝えるために、あらかじめ定義されたスタイルを持つアイコンとしてデザインされています。

Image from Gyazo

Blazor ボタン

Ignite UI for Blazor ボタンディレクティブは、任意のボタン、span、div、anchor 要素を完全に機能的なボタンに変換するために利用されます。

Image from Gyazo

Blazor カレンダー

Ignite UI for Blazor カレンダーコンポーネントは、日付情報を簡単かつ直感的に表示する方法を提供します。ユーザーは、単一の日付選択、複数の日付選択、日付範囲の選択の3つの異なる選択モードを利用することができます。

Image from Gyazo

Blazor カード

Ignite UI for Blazor カードコンポーネントは、テキスト、画像、アイコン、ボタンをリッチなデザインで表示し、より詳細な情報への入り口とすることが可能です。

Image from Gyazo

Blazor チェックボックス

Ignite UI for Blazor チェックボックスコンポーネントは、ユーザーがある項目に対してオンオフを切り替えるようにする選択コントロールです。ネイティブブラウザのチェックボックスと似たような振る舞いをします。

Image from Gyazo

Blazor アイコン

Ignite UI for Blazor アイコンコンポーネントは、アイコンやフォントファミリーを統一し、開発者がそれらを互換的に利用し、マークアップにマテリアルアイコンを追加できるようにします。

f:id:cleverdog:20211217143848j:plain

Blazor インプット

Ignite UI for Blazor インプットは、一行または複数行のテキスト要素を作成するために使用されます。これらは、フォーム入力を扱う際の一般的なシナリオをカバーするのに役立ちます。

Image from Gyazo

Blazor リスト

リストコンポーネントは、アイテムグループを表示するときに非常に便利です。テキストで構成されるシンプルなリストを作成することも、異なるレイアウトのより複雑なリストを作成することも可能です。Ignite UI for Blazor リストコンポーネントは、アイテムの行を表示し、1つ以上のヘッダーアイテムをサポートします。各リスト項目は完全にテンプレート化されており、あらゆる有効なHTML要素をサポートします。

Image from Gyazo

Blazor ナビゲーションバー

Ignite UI for Blazor ナビゲーションバーコンポーネントは、アプリ内のどのページ、階層にいるかをユーザーに知らせ、(ブラウザの「戻る」ボタンと同じように)戻ることを支援するものです。ナビゲーションバーは、検索やお気に入りなどのクイックアクションへのリンクも提供でき、ユーザーが無効なページや状態に移動しようとすることなく、アプリケーション内をスムーズに移動できるよう支援します。

Image from Gyazo

Blazor ナビゲーションドロワー

Ignite UI for Blazor ナビゲーションドロワーコンポーネントは、サイドナビゲーションのコンテナです。コンテンツの上に置いてスライドさせたり、ピン留めしてコンテンツの中で展開・折りたたんだりすることができます。ミニバージョンは、閉じた状態でもナビゲーションに素早くアクセスできます。ナビゲーションドロワーは、レスポンシブなモード選択とタッチジェスチャーを備えています。コンテンツは完全にカスタマイズ可能で、デフォルトのメニューアイテムスタイルを利用できます。

Image from Gyazo

Blazor ラジオおよびラジオグループ

Ignite UI for Blazor のラジオボタンとラジオグループコンポーネントは、並べて表示される選択肢の中から、ユーザーが一つの選択肢を選択できるようにするものです。

Image from Gyazo

Blazor リップル

Ignite UI for Blazor リップルコンポーネントは、タッチやマウスクリックに反応するアニメーションを提供します。

Image from Gyazo

Blazor スイッチ

Ignite UI for Blazor スイッチコンポーネントは、チェックボックスのように機能しますが、真偽値のオンとオフの状態をわかりやすく表現することが出来ます。スイッチコンポーネントをクリックすると、コンポーネントの値が「on」状態(boolean true)から「off」状態(boolean false)へと切り替わります。

Image from Gyazo

最後に

最新バージョン21.2 で搭載された機能は以上です。今後追加すべきコンポーネント、新機能、修正が必要な問題などに関してアイデアがあればお気軽にインフラジスティックス・ジャパン営業部(japansalesgroup@infragistics.com)までご連絡ください。