IgbTree – 展開インジケータのアイコン画像を変更する方法

Ignite UI for Blazor が提供するツリーコンポーネント、IgbTree に表示される、展開インジケータのアイコン画像ですが、こちらは展開インジケータの要素をセレクタで指定した CSS スタイル定義によって、標準とは異なる画像に変更することができます。

以下にその CSS スタイル定義の例を示します。

igc-tree-item::part(indicator) {

    /* もともと表示されるインジケーターの色を透明にして、
       外見上、見えなくしておきます。 */
    color: transparent;

    /* その上で、新たなインジケーターを、要素の背景画像として設置します。
       なお、ここで指定するのは、閉じた状態の展開インジケータの画像です。*/
    background-image: url(閉じた状態の展開インジケータに表示したい画像への URL);

    /* サイズやオフセット位置をうまく調整して、要素の中央に表示されるようにします。
       (インジケーター要素のサイズは、24px x 24px です) */
    background-size: 18px 18px;
    background-position: center center;
    background-repeat: no-repeat;
}

/* 展開されているアイテムには aria-expanded=true 属性がつきます。
  それをもとに、開いた状態の展開インジケーターの外観を定義します。 */
igc-tree-item[aria-expanded=true]::part(indicator) {
    background-image: url(開いた状態の展開インジケータに表示したい画像への URL);
}

上記の CSS スタイル定義の例は、閉じている状態と開いている状態の、2 つの展開インジケータ画像を別々に用意して使用することを想定した例ですが、もちろん、transform CSS プロパティ指定などを使用して、画像ファイルは同じものを使って、閉じている状態と開いている状態とで 90 度回転させる、といった指定でも構いません 。その場合は、さらに、回転に対してアニメーション効果を適用することもできます。下図はその作例です。

実際に動作する様子を以下のリンク先のライブデモンストレーションサイトで確認できます。

KB12822_BlazorWasmApp1 (igjp-kb-blazor.github.io)

上記作例の Blazor アプリケーションのソースコードは以下からアクセス頂けます。