IgbTree – Label の文字列を改行させる方法

IgbTree では、各ノード (IgbTreeItem) のラベル表示に対して、独自の HTML 要素と CSS を用いて柔軟なスタイル設定が可能です。この記事では slot=”label” を使用してラベル領域に <br /> を含む HTML を挿入し、CSS クラスを用いて高さを自動調整させるようにすることで、任意の改行付き文字列を表示させる方法をご紹介します。

IgbTree の設定

以下のコードでは、IgbTreeItem に slot=”label” を用いた要素を埋め込み、<br /> を含む HTML をそのコンテンツに指定しています。これによりラベル領域の slot に改行された文字列が流し込まれるようになります。

@* App.razor *@

<IgbTree>
    <IgbTreeItem Label="1 月スプリント" Expanded>
        <IgbTreeItem>
            <span slot="label">機能 A<br />機能 B<br />機能 C</span>
        </IgbTreeItem>
    </IgbTreeItem>
    <IgbTreeItem Label="2 月スプリント" Expanded>
        <IgbTreeItem>
            <span slot="label">機能 D<br />機能 E</span>
        </IgbTreeItem>
    </IgbTreeItem>
</IgbTree>

実行してみましょう

DOM にはちゃんと 3 行分のテキストが入っていますが、画面にはなんと 2 行しか表示されていません！

これは、ラベル本体の高さよりもラベルの親の高さが小さくなってしまっているためで、入りきらなかったラベルの下の部分が切り取られてしまっているからです。

そこで CSS による高さ調整をしていきます。

CSS による高さ調整

/* App.razor.css */

/* ラベル内に<br>がある要素の親の要素の高さの縛りを解除 */
::deep igc-tree-item:has(> span[slot="label"] br)::part(wrapper) {
    min-height: auto;
    height: auto;
}

/* ラベル内に<br>がある要素のラベル部分の高さをコンテンツの高さに合わせる */
::deep igc-tree-item:has(> span[slot="label"] br)::part(label) {
    display: flex;
    height: auto;
    min-height: min-content;
}

/* スロットから流し込まれたslot要素であるspanをblock要素にする */
::deep igc-tree-item:has(> span[slot="label"] br) span[slot="label"] {
    display: block;
    /* line-height: 1.2;*/    /* 任意で行間調整 */
}

各セレクターの説明は割愛します。

まず、既定では親要素に高さ指定がされていますので、それを解除する必要があります。ラベル部分に br 要素がある場合に限って、その親の min-height、height にそれぞれ auto を指定し、高さの縛りを解除します。

次に、ラベル部分の高さは中身に合わせて自動調整させたいので、display: flex とし、さらに中身が表示されるのに最低限必要な高さまで領域を広げます。

そして、ラベル要素を block 要素にし、中身が収まるのに必要な高さに計算されるようにします。また、既定のままでは行間が広く感じる場合は、キュッと縮めてもよいでしょう。

実行させてみましょう

　

いい感じですね！

　

　

関連ナレッジ ベース

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