IgbTree – Label のスタイルをカスタマイズする方法

IgbTree では、各ノード（IgbTreeItem）の Label 表示に対して、独自の HTML 要素と CSS を用いて柔軟なスタイル設定が可能です。この記事では、slot=”label” を使用してラベル領域に 要素を挿入し、CSS クラスを適用することで、ラベルの表示スタイルをカスタマイズする方法をご紹介します。

IgbTree の設定

以下のコードでは、各 IgbTreeItem に slot=”label” を用いた 要素を埋め込み、それぞれ異なる CSS クラスを指定しています。これにより、状態ごとに異なるスタイルを適用できます。

<IgbTree>
    <IgbTreeItem Label="Features" Expanded>
        <IgbTreeItem>
            <span slot="label" class="new-label">新機能</span>
        </IgbTreeItem>
        <IgbTreeItem>
            <span slot="label" class="beta-label">ベータ版</span>
        </IgbTreeItem>
        <IgbTreeItem>
            <span slot="label" class="updated-label">更新された</span>
        </IgbTreeItem>
    </IgbTreeItem>
</IgbTree>

CSS によるスタイル設定

次に示す CSS は、各ラベルに対応するクラスにスタイルを適用しています。この例では擬似要素 ::after を使用して、状態を示すバッジをラベルの右側に表示します。

::deep .new-label {
  font-weight: bold;
}

::deep .new-label::after {
  content: "NEW";
  background-color: #ff0000;
  color: #ffffff;
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: 12px;
  vertical-align: top;
  margin-left: 5px;
}

実行結果

関連ドキュメント

• IgbTree – 展開インジケータのアイコン画像を変更する方法 – INFRAGISTICS ナレッジ ベース