IgbButton – Disabled（無効化）時のスタイルを変更したい

IgbButton は、Disabled プロパティよりボタンを無効化できます。本記事では、アプリのテーマに合わせてデザインを統一したい場合など、Disabled 時の見た目をカスタマイズする方法を紹介します。

実装例

例として CSS クラス名 “custom-disabled” を追加した IgbButton を用意します。

<IgbButton Disabled="true" Class="custom-disabled">
    カスタムスタイル
</IgbButton>

igc-button 要素で上記のカスタムクラスを持ち、かつ :disabled 状態であるものを指定します。

::deep igc-button.custom-disabled:disabled::part(base) {
    background: #ccc;
    color: #666;
    opacity: 0.7;
}

上記 CSS を適用することで、IgbButton は Disabled 時のボタンは淡いグレー表示となり、無効状態の見た目をアプリのテーマに合わせることができます。