React Input (入力) の概要

Ignite UI for React Input は、ユーザーがデータを入力できるコンポーネントです。

React Input の例

EXAMPLE

TSX

CSS

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

IgrInputModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrInput type="email" label="Subscribe" placeholder="john.doe@mail.com">
                    <span slot="prefix">Email</span>
                </IgrInput>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputOverview/>);
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

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

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

<IgrInput type="email" label="Subscribe"></IgrInput>
tsx

Prefix と Suffix

prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。次のサンプルでは、テキスト プレフィックスとアイコン サフィックスを使用して新しい Input フィールドを作成します:

EXAMPLE

TSX

CSS

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

IgrInputModule.register();
IgrIconModule.register();

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

    public phoneIcon: IgrIcon;

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrInput type="tel" label="Phone" placeholder="888 123456">
                    <span slot="prefix">+359</span>
                    <IgrIcon ref={this.iconRef} name="phone" />                    
                    <span slot="suffix"></span>
                </IgrInput>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }
        this.phoneIcon = icon;
        const phoneIconText = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';
        this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
    }
}

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

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

Edit in: Codesandbox

ヘルパー テキスト

helper-text スロットは、入力の下に配置されたヒントを提供します。Phone Input にヘルパー テキストを追加しましょう:

EXAMPLE

TSX

CSS

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

IgrInputModule.register();
IgrIconModule.register();

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

    public phoneIcon: IgrIcon;

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrInput type="tel" label="Phone">
                    <span slot="prefix">+359</span>
                    <IgrIcon ref={this.iconRef} name="phone" />
                    <span slot="helper-text">Ex.: +359 888 123 456</span>
                </IgrInput>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }
        this.phoneIcon = icon;
        const phoneIconText = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';
        this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
    }
}

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

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

Edit in: Codesandbox

Input のサイズ設定

ユーザーが --ig-size CSS 変数を使用して IgrInput のサイズを変更できるようにすることができます。これを行うには、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびに、Input のサイズを変更します。

EXAMPLE

TSX

index.css

InputSizeStyling.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './InputSizeStyling.css';
import { IgrInput, IgrInputModule, IgrRadio, IgrRadioModule, IgrRadioGroup, IgrRadioGroupModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrInputModule.register();
IgrRadioModule.register();

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

    constructor(props: any) {
        super(props);  
        this.onRadioChange = this.onRadioChange.bind(this);
        this.state = { size: "medium"};        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div id="radioGroup">
                    <IgrRadioGroup alignment="horizontal">
                        <IgrRadio name="size" value="small" labelPosition="after" change={this.onRadioChange}><span>Small</span></IgrRadio>
                        <IgrRadio name="size" value="medium" labelPosition="after" checked={true} change={this.onRadioChange}><span>Medium</span></IgrRadio>
                        <IgrRadio name="size" value="large" labelPosition="after" change={this.onRadioChange}><span>Large</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
                <IgrInput className={'size-' + this.state.size} type="text" label="Required" value="This input is required" required={true} />                
                <IgrInput className={'size-' + this.state.size} type="text" label="Disabled" value="This input is disabled" disabled={true} />                
                <IgrInput className={'size-' + this.state.size} type="text" label="Readonly" value="This input is readonly" readOnly={true} />                
            </div>
        );
    }

    public onRadioChange(e: any) {
        if (e.checked == true) {
            this.setState({ calendarSize: e.value });
        }
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<InputSize/>);
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コピー

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

#radioGroup {
    display: flex;
    margin: 0 auto;
    width: 15%;
}cssコピー

Edit in: Codesandbox

上記のサンプルでは、次の属性の使用法を示しています:

• required - 入力を必須としてマークするために使用されます。
• disabled - 入力を無効にするために使用されます。
• readonly - 入力を読み取り専用としてマークするために使用されます。

スタイル設定

IgrInput コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、公開されているすべての CSS パーツを示します:

名	説明
container	すべての主要な入力要素を保持するメイン ラッパー。
input	ネイティブ入力要素。
label	ネイティブ ラベル要素。
prefix	プレフィックス ラッパー。
suffix	サフィックス ラッパー。
helper-text	ヘルパー テキスト ラッパー。

igc-input::part(input) {
  background-color: var(--ig-primary-100);
  border-color: var(--ig-secondary-500);
  box-shadow: none;
}

igc-input::part(label) {
  color: var(--ig-gray-700);
}

igc-input::part(prefix),
igc-input::part(suffix) {
  color: var(--ig-primary-600-contrast);
  background-color: var(--ig-primary-600);
  border-color: var(--ig-secondary-600);
}
scss

EXAMPLE

TSX

index.css

InputStyling.css

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

IgrInputModule.register();
IgrIconModule.register();

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

    public phoneIcon: IgrIcon;

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrInput type="tel" label="Phone">
                    <span slot="prefix">+359</span>
                    <IgrIcon ref={this.iconRef} name="phone" />                    
                    <span slot="helper-text">Ex.: +359 888 123 456</span>
                </IgrInput>
            </div>
        );
    }

    public iconRef(icon: IgrIcon){
        if (!icon) { return; }
        this.phoneIcon = icon;
        const phoneIconText = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>';
        this.phoneIcon.registerIconFromText("phone", phoneIconText, "material");
    }
}

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

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

igc-input::part(input){
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

igc-input::part(label){
    color: rgb(1, 42, 74);
}

igc-input::part(prefix),
igc-input::part(suffix){
    color: white;
    border-color: rgb(42, 111, 151);
    background-color: rgb(70, 143, 175);
}
cssコピー

Edit in: Codesandbox

API リファレンス

• IgrIcon
• IgrInput
• IgrRadio
• スタイル設定 & テーマ

その他のリソース

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