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

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

React Icon Button の例

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: "10px";
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: "10px";
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: "10px";
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

npm install igniteui-react
cmd

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

import { IgrIconButtonModule, IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrIconButtonModule.register();
tsx

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

例

バリアント

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonVariant extends React.Component<any, any> {

    public icon1: IgrIconButton;
    public icon2: IgrIconButton;
    public icon3: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton style={{margin: "10px"}} ref={this.smallRef} 
                        name="thumb-up" 
                        collection="material"
                        variant="flat">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.mediumRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton style={{margin: "10px"}} ref={this.largeRef} 
                        name="thumb-up" 
                        collection="material" 
                        variant="outlined">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon1 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon1.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon2 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon2.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon3 = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon3.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonVariant/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

<IgrIconButton name="search" collection="contained"></IgrIconButton>
tsx

サイズ

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrIconButtonModule.register();

export default class IconButtonSize extends React.Component<any, any> {

    public smallIcon: IgrIconButton;
    public mediumIcon: IgrIconButton;
    public largeIcon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.smallRef = this.smallRef.bind(this);
        this.mediumRef = this.mediumRef.bind(this);      
        this.largeRef = this.largeRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <IgrIconButton className="size-small" ref={this.smallRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-medium" ref={this.mediumRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                    <IgrIconButton className="size-large" ref={this.largeRef} 
                        name="thumb-up"
                        collection="material"
                        variant="contained">
                    </IgrIconButton>
                </div>
            </div>
        );
    }
    
    public smallRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.smallIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.smallIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public mediumRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.mediumIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.mediumIcon.registerIconFromText("thumb-up", iconText, "material");
    }

    public largeRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.largeIcon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.largeIcon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonSize/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

.size-small {
    margin: "10px";
    --ig-size: var(--ig-size-small);
}

.size-medium {
    margin: "10px";
    --ig-size: var(--ig-size-medium);
}

.size-large {
    margin: "10px";
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

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

igc-icon-button {
    --ig-size: var(--ig-size-medium);
}
css

タイプ

href 属性が設定されると、アイコン ボタン コンポーネントはその内部構造を <button> から <a> タイプ要素に変更します。その場合、アイコン ボタンは通常のリンクと考えることができます。href 属性を設定すると、アイコン ボタンの rel、target、および download 属性も設定できます。

<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
tsx

Mirrored (ミラー化済み)

一部のアイコンは、右から左 (RTL) モードで使用する場合、少し異なって見える必要があります。そのため、設定するとアイコン ボタンを水平方向に反転させる mirrored 属性を提供します。

<IgrIconButton name="thumb-up" mirrored="true"></IgrIconButton>
tsx

スタイル設定

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);
}
css

EXAMPLE

TSX

IconButtonStyling.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrIconButton, IgrIconButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./IconButtonStyling.css";

IgrIconButtonModule.register();

export default class IconButtonStyling extends React.Component<any, any> {

    public icon: IgrIconButton;

    constructor(props: any) {
        super(props); 
        this.iconRef = this.iconRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrIconButton style={{margin: "10px"}} ref={this.iconRef} 
                    name="thumb-up" 
                    collection="material"
                    variant="contained">
                </IgrIconButton>
            </div>
        );
    }
    
    public iconRef(icon: IgrIconButton) {
        if (!icon) { return; }
        this.icon = icon;
        const iconText = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';
        this.icon.registerIconFromText("thumb-up", iconText, "material");
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<IconButtonStyling/>);
tsxコピー

igc-icon-button[variant=contained]:not([disabled])::part(base) {
    padding: 12px;
    color: olive;
    background-color: lightgray;
    --ig-size: var(--ig-size-small);
  }
  
igc-icon-button::part(icon) {
  --size: 32px;
}
cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

API リファレンス

• IgrButtonBase
• IgrButton
• IgrIconButton
• IgrIcon
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)