IgbButton – ボタンのテキストを右寄せ・左寄せに設定する方法

IgbButton のボタンキャプションは、既定では中央寄せとなっています。

このボタンキャプションは、CSS によるスタイル指定で右寄せや左寄せにすることができます。

IgbButton がレンダリングする HTML 要素、<igc-buton> にて公開されている CSS パーツのひとつ、”base” が display: flex で指定されており、これに対して justify-content CSS プロパティを設定することで右寄せ・左寄せを設定できます。

例えば、CSS クラス名 “align-left” が追加された IgbButton のテキストを左寄せにしたい場合、

<IgbButton style="width: 200px;" Class="align-left">
    左寄せ
</IgbButton>

以下の CSS 定義を追加することで、

::deep igc-button.align-left::part(base) {
    justify-content: start;
}

以下のように左寄せでボタンキャプションが表示されるようになります。

右寄せにしたい場合は justify-content に end を指定してください。以下に実際の実行例へのリンクを掲載します。

その他に IgButton (<igc-button> 要素) で利用できるパーツ名について詳しくは、以下のリンク先のドキュメントをご参照ください。

以下のリンク先から、右寄せの例も含めた完全なサンプルプログラムを参照いただけます。