React Chip (チップ) の概要

Ignite UI for React Chip は、ユーザーが情報を入力したり、選択したり、コンテンツをフィルタリングしたり、アクションをトリガーしたりするのに役立ちます。

React Chip の例

EXAMPLE

TSX

CSS

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

IgrChipModule.register();

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

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                 <IgrChip selectable={true} removable={true}>
                     <span>Chip</span>
                 </IgrChip>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

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

使用方法

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

npm install igniteui-react
cmd

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

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

<IgrChip></IgrChip>
tsx

選択可能な Chip を表示するには、Chip の selectable プロパティを使用できます。

<IgrChip selectable="true"></IgrChip>
tsx

削除可能可能な Chip を表示するには、Chip の removable プロパティを使用できます。

<IgrChip removable="true"></IgrChip>
tsx

コード例

バリアント

Ignite UI for React Chip は、いくつかの事前定義されたスタイルのバリアントをサポートします。サポートされている値の 1 つ (Primary、Info、Success、Warning、または Danger) を variant プロパティに割り当てることにより、バリアントを変更できます。

<IgrChip variant="success"></IgrChip>
tsx

EXAMPLE

TSX

CSS

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

IgrChipModule.register();

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

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample" style={{flexDirection: "row", gap: "8px", alignItems: "baseline"}}>
                 <IgrChip variant="primary" selectable={true} removable={true}>
                     <span>Primary</span>
                 </IgrChip>
                 <IgrChip variant="info" selectable={true} removable={true}>
                     <span>Info</span>
                 </IgrChip>
                 <IgrChip variant="success" selectable={true} removable={true}>
                     <span>Success</span>
                 </IgrChip>
                 <IgrChip variant="warning" selectable={true} removable={true}>
                     <span>Warning</span>
                 </IgrChip>
                 <IgrChip variant="danger" selectable={true} removable={true}>
                     <span>Danger</span>
                 </IgrChip>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

無効

Ignite UI for React Chip は、disabled プロパティを使用して無効にできます。

<IgrChip disabled="true"></IgrChip>
tsx

Prefix / Suffix (プレフィックス / サフィックス)

IgrChip コンポーネントの Prefix と Suffix の部分とそれらのスロットを使用して、Chip のメイン コンテンツの前後に異なるコンテンツを追加できます。デフォルトの選択アイコンと削除アイコンが用意されていますが、IgrSelect スロットと Remove スロットを使用してカスタマイズできます。Start スロットと End スロットを使用して、メイン コンテンツの前後にコンテンツを追加できます。

EXAMPLE

TSX

CSS

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

IgrChipModule.register();
IgrIconModule.register();

export default class ChipMultiple extends React.Component<any, any> {
    
    public customSelectIcon: IgrIcon;
    public customRemoveIcon: IgrIcon;
    public brushIcon: IgrIcon;
    public brickIcon: IgrIcon;
    public dogIcon: IgrIcon;

    constructor(props: any) {
        super(props);  
        
        this.customSelectRef = this.customSelectRef.bind(this);
        this.customRemoveRef = this.customRemoveRef.bind(this);
        this.brushRef = this.brushRef.bind(this);
        this.brickRef = this.brickRef.bind(this);
        this.dogRef = this.dogRef.bind(this); 
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{flexDirection: "row", gap: "8px"}}>
                    <IgrChip selectable={true} removable={true} >
                        <span slot="select">
                            <IgrIcon ref={this.customSelectRef} name="custom-select" collection="material"></IgrIcon>
                        </span>
                        <span>Custom Icons</span>
                        <span slot="remove">
                            <IgrIcon ref={this.customRemoveRef} name="custom-remove" collection="material"></IgrIcon>
                        </span>
                    </IgrChip>
                    <IgrChip removable={true}>
                        <span slot="start">
                            <IgrIcon ref={this.brushRef} name="brush" collection="material"></IgrIcon>
                        </span>
                        <span>Start Slot</span>
                    </IgrChip>
                    <IgrChip selectable={true}>
                        <span>End Slot</span>
                        <span slot="end">
                            <IgrIcon ref={this.brickRef} name="brick-wall" collection="material"></IgrIcon>
                        </span>
                    </IgrChip>
                    <IgrChip disabled={true}>
                        <span>Disabled Chip</span>
                        <span slot="end">
                            <IgrIcon ref={this.dogRef} name="dog-icon" collection="material"></IgrIcon>
                        </span>
                    </IgrChip>
                </div>
            </div>
        );
    }

    public customSelectRef(icon: IgrIcon){
        if (!icon) { return; }        
        this.customSelectIcon = icon;
        const customSelectIconText = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" /></svg>';
        this.customSelectIcon.registerIconFromText(
            "custom-select", customSelectIconText, "material"
        );
    }

    public customRemoveRef(icon: IgrIcon){
        if (!icon) { return; }
        this.customRemoveIcon = icon;
        const customRemoveIconText = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" /> </svg>';
        this.customRemoveIcon.registerIconFromText(
            "custom-remove", customRemoveIconText, "material"
        );
        
    }

    public brushRef(icon: IgrIcon){
        if (!icon) { return; }
        this.brushIcon = icon;
        const brushIconText = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bqbrush-desc bqbrush-title"><title id="bqbrush-title">Brush Icon</title><desc id="bqbrush-desc">A picture showing a painting brush.</desc><path d="M13.093 6.743a1.074 1.074 0 011.306.251l.237.237-6.4 6.4-.242-.231a1.074 1.074 0 01-.251-1.306c.446-.693 1.553-2.516.515-3.554-1.584-1.585-2.225-.94-3.809-2.528S2.714 3 3.354 2.354s2.073-.489 3.658 1.095.943 2.225 2.527 3.809c1.038 1.042 2.861-.069 3.554-.515zm6.93 5.874L15.31 7.9 8.9 14.31l4.433 4.433c-.039.159-.084.327-.137.508 0 0-.8 2.749.8 2.749s.8-2.749.8-2.749a10.75 10.75 0 01-.272-1.14L16.2 16.44a8.944 8.944 0 00-2.072-3.314s.555-.545 3.323 2.063l.811-.811-1.54-2.5 2.5 1.539z"/></svg>';
        this.brushIcon.registerIconFromText(
            "brush", brushIconText, "material"
        );    
    }

    public brickRef(icon: IgrIcon){
        if (!icon) { return; }
        this.brickIcon = icon;
        const brickIconText = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-labelledby="bpbrick-wall-desc bpbrick-wall-title"><title id="bpbrick-wall-title">Brick Wall Icon</title><desc id="bpbrick-wall-desc">A picture depicting a wall made of bricks.</desc><path d="M6 5H2V1h4zm10-4H8v4h8zM2 11h8V7H2zm10 0h8V7h-8zM22 1h-4v4h4zM6 13H2v4h4zm10 0H8v4h8zM2 23h8v-4H2zm10 0h8v-4h-8zm10-10h-4v4h4z"/></svg>';
        this.brickIcon.registerIconFromText(
            "brick-wall", brickIconText, "material"
        );        
    }

    public dogRef(icon: IgrIcon){
        if (!icon) { return; }
        this.dogIcon = icon;
        const dogIconText = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /> </svg>';
        this.dogIcon.registerIconFromText(
            "dog-icon", dogIconText, "material"
        );
    }
}

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

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

Edit in: Codesandbox

Size (サイズ)

ユーザーが --ig-size CSS 変数を利用して IgrChip のサイズを選択できるようにします。

<IgrChip size="small" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="medium" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="large" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
tsx

igc-chip {
    --ig-size: var(--ig-size-large);
}
css

EXAMPLE

TSX

CSS

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

IgrChipModule.register();

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

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample" style={{flexDirection: "row", gap: "8px", alignItems: "baseline"}}>
                 <IgrChip className="size-small" selectable={true} removable={true}>
                     <span>Chip</span>
                 </IgrChip>
                 <IgrChip className="size-medium" selectable={true} removable={true}>
                     <span>Chip</span>
                 </IgrChip>
                 <IgrChip className="size-large" selectable={true} removable={true}>
                     <span>Chip</span>
                 </IgrChip>
            </div>
        );
    }
}

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

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

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

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

Edit in: Codesandbox

スタイル設定

IgrChip コンポーネントは、すべてのスタイル プロパティを変更するために使用できる base、prefix、suffix CSS パーツを公開します。

igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}
css

EXAMPLE

TSX

ChipStyle.css

index.css

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

IgrChipModule.register();

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

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample" style={{flexDirection: "row", gap: "8px"}}>
                 <IgrChip selectable={true} removable={true}>
                     <span>Chip</span>
                 </IgrChip>
            </div>
        );
    }
}

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

igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

igc-chip::part(suffix) {
    color: #B7B6C2;
}cssコピー

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

Edit in: Codesandbox

API リファレンス

• IgrChip
• スタイル設定 & テーマ

その他のリソース

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