React Icon Button (アイコン ボタン) の概要
Ignite UI for React Icon Button コンポーネントを使用すると、開発者は登録済みのアイコンをアプリケーションのボタンとして使用できます。アイコン コンポーネントのすべての機能を備えていますが、ボタン コンポーネントの機能も追加しています。
React Icon Button の例
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrIconButton とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrIconButtonModule, IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrIconButtonModule.register();
<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>
例
バリアント
通常のボタン コンポーネントと同様に、アイコン ボタンはいくつかのバリアントをサポートします - flat (デフォルト)、contained、および outlined。アイコン ボタンのタイプを変更するには、アイコン ボタンの variant 属性を設定します。
<IgrIconButton name="search" collection="contained"></IgrIconButton>
サイズ
ボタンのサイズは、CSS 変数 --ig-size を使用して、サポートされている 3 つのサイズ - --ig-size-small、--ig-size-medium、--ig-size-large (デフォルト) - のいずれかに変更できます。
<IgrIconButton name="thumb-up" size="medium"></IgrIconButton>
igc-icon-button {
--ig-size: var(--ig-size-medium);
}
タイプ
href 属性が設定されると、アイコン ボタン コンポーネントはその内部構造を <button> から <a> タイプ要素に変更します。その場合、アイコン ボタンは通常のリンクと考えることができます。href 属性を設定すると、アイコン ボタンの rel、target、および download 属性も設定できます。
<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
Mirrored (ミラー化済み)
一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコン ボタンを水平方向に反転させる mirrored 属性を提供します。
<IgrIconButton name="thumb-up" mirrored="true"></IgrIconButton>
スタイル設定
アイコン ボタン コンポーネントは、2 つの CSS パーツを公開します。ラッピング要素 (<button> または <a>) とラップされた <igc-icon> 要素のスタイルを設定できる base と icon です。
igc-icon-button::part(base) {
padding: 12px;
color: olive;
}
igc-icon-button::part(icon) {
--size: 32px;
}