Open Source

React Icon Button (アイコンボタン) の概要

Ignite UI for React Icon Button コンポーネントを使用すると、開発者は登録済みのアイコンをアプリケーションのボタンとして使用できます。アイコンコンポーネントのすべての機能を備えていますが、ボタンコンポーネントの機能も追加しています。

React Icon Button の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrIconButton とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButton の使用を開始する最も簡単な方法は次のとおりです:

<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>

例

バリアント

通常のボタンコンポーネントと同様に、アイコンボタンはいくつかのバリアントをサポートします - flat (デフォルト)、contained、および outlined。アイコンボタンのタイプを変更するには、アイコンボタンの variant 属性を設定します。

<IgrIconButton name="search" variant="contained"></IgrIconButton>

サイズ

ボタンのサイズは、CSS 変数 --ig-size を使用して、サポートされている 3 つのサイズ - --ig-size-small、--ig-size-medium、--ig-size-large (デフォルト) - のいずれかに変更できます。

<IgrIconButton className="size-medium" name="thumb-up"></IgrIconButton>

.size-medium {
    --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>

スタイル設定

IgrIconButton コンポーネントは、2 つの CSS パーツを公開します。ラッピング要素 (<button> または <a>) とラップされた <igc-icon> 要素のスタイルを設定できる base と icon です。

igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

API リファレンス

IgrButton
IgrIconButton
IgrIcon

React Icon Button (アイコン ボタン) の概要