React Button (ボタン) の概要

React Button コンポーネントを使用すると、React アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、React Button クリックされたコールバック、React ボタンの切り替え、React ボタンの無効化などを通じて柔軟性を提供します。

React Button の例

使用方法

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

npm install igniteui-react

次に、以下のように、IgrButton と必要な CSS をインポートする必要があります:

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

<IgrButton />

Prefix / Suffix

IgrButton コンポーネントの prefix スロットと suffix スロットを使用すると、ボタンのメインコンテンツの前後に異なるコンテンツを追加できます。

<IgrButton type="button" variant="contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgrButton>

タイプ

href 属性が設定されている場合、ボタンコンポーネントはその内部構造を <button> から <a> タイプの要素に変更します。その場合、ボタンは通常のリンクと考えることができます。href 属性を設定すると、rel、target および download 属性も設定できます。ボタンコンポーネントが実際の <button> 要素を内部で使用する場合、プロパティを次のいずれかの値に設定することで、その displayType を指定できます。

Submit - フォームデータを送信する場合
reset - フォームデータを初期値にリセットする場合
button - ウェブページのどこかにカスタム機能を備えたボタンを追加する場合

Button のバリアント

Contained ボタン

variant を使用して、コンポーネントテンプレートにシンプルな contained ボタンを追加します。バリアントを設定しない場合、デフォルトでは contained に設定されることに注意してください。

<IgrButton variant="contained"><span>Contained</span></IgrButton>

Outlined ボタン

outlined ボタンを作成するために必要なのは、variant プロパティの値を変更することだけです。

<IgrButton variant="outlined"><span>Outlined</span></IgrButton>

Flat ボタン

同様に、flat バリアントに切り替えることができます。

<IgrButton variant="flat"><span>Flat</span></IgrButton>

Floating Action ボタン

variant プロパティを fab に設定することで、フローティングアクションボタンを作成できます。

<IgrButton variant="fab"><span>Fab</span></IgrButton>

ボタンのサイズ設定

ユーザーは、CSS 変数 --ig-size を使用して button コンポーネントのサイズを変更できます。次の例では、すべてのサイズ値を表示するためのラジオボタンをいくつか追加します。このようにして、選択されるたびにボタンの size プロパティを変更します。

import { IgrButton, IgrRadio, IgrRadioGroup } from 'igniteui-react';

const [size, setSize] = useState("small");

const onRadioChange = (e: IgrRadioChangeEventArgs) => {
    setSize(e.detail.value);
};

<IgrRadioGroup alignment="horizontal" style={{ display: "flex", margin: "0 auto", width: "15%" }}>
    <IgrRadio name="size" value="small" labelPosition="after" checked={size === "small"} onChange={onRadioChange}>
        <span>Small</span>
    </IgrRadio>
    <IgrRadio name="size" value="medium" labelPosition="after" onChange={onRadioChange}>
        <span>Medium</span>
    </IgrRadio>
    <IgrRadio name="size" value="large" labelPosition="after" onChange={onRadioChange}>
        <span>Large</span>
    </IgrRadio>
</IgrRadioGroup>

<div className="button-container">
    <IgrButton className={"size-" + size} variant="flat">
        <span>Flat</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="contained">
        <span>Contained</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="outlined">
        <span>Outlined</span>
    </IgrButton>
    <IgrButton className={"size-" + size} variant="fab">
        <span>Like</span>
    </IgrButton>
</div>

上記のコードを実装した結果は、次のようになります:

ダウンロード

download プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。

<IgrButton
    href=""
    variant="contained"
    download="url"
    target="_blank" >
    <span>Download</span>
</IgrButton>

スタイル設定

IgrButton コンポーネントは、スタイル設定に使用できる 3 つの CSS パーツを公開します。

名前	説明
`base`	igc-button コンポーネントのネイティブボタン要素。
`prefix`	igc-button コンポーネントのプレフィックスコンテナー。
`suffix`	igc-button コンポーネントのサフィックスコンテナー。

base CSS パーツを使用すると、ラップされた要素 (<button> または <a>) のスタイルを設定できます。

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}