React Text Area (テキストエリア) の概要

Ignite UI for React テキストエリアは、複数行のプレーンテキスト編集コントロールを表します。レビューフォームやフィードバックフォームへのコメントなど、ユーザーがかなりの量の自由形式のテキストを入力できるようにする場合に便利です。

React テキストエリアの例

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

IgrTextareaModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrTextarea rows={3} label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
            </div>
        );
    }
}

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

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

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

依存関係

テキストエリアコンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。

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

npm install igniteui-react
cmd

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

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

<IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
tsx

プレフィックス、サフィックス、ヘルパーテキスト

prefix スロットと suffix スロットを使用すると、テキストエリアのメインコンテンツの前後に異なるコンテンツを追加できます。helper-text スロットは、テキストエリアの下に配置されたヒントを提供します。次のサンプルでは、テキストプレフィックス、アイコンサフィックス、およびヒントとしてヘルパーテキストを含む新しいテキストエリアフィールドを作成します。

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

IgrTextareaModule.register();
IgrIconModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrTextarea label="Your feedback">
                    <span slot="prefix">
                    <IgrIcon ref={this.iconRef} name='feedback' collection="material"></IgrIcon>
                    </span>                    
                    <p slot="helper-text">Give us a short description of what you liked/disliked</p>
                </IgrTextarea>
            </div>
        );
        
    }      

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }

        icon.registerIconFromText( "feedback",
        `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
        "material");    
    } 
}


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

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

テキストエリアのサイズ変更

IgrTextarea には 3 つの異なるサイズ変更オプションがあります。none に設定すると、テキストエリアのサイズは変更されず、スクロールバーを使用してオーバーフローテキストが表示されます。vertical (デフォルトのオプション) に設定すると、テキストエリアは垂直方向にサイズ変更できます。auto に設定すると、テキストエリアにすべてのユーザー入力が一度に表示されます。オーバーフローしたテキストは新しい行に折り返され、テキストエリアが自動的に拡張されます。

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

IgrTextareaModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="sample">
               <IgrTextarea label="Resize: none" resize="none">                                      
                    <p slot="helper-text">This textarea does not resize and uses a scroll bar to show overflow text.</p>
                </IgrTextarea>
                <IgrTextarea label="Resize: vertical (default)">                                    
                    <p slot="helper-text">This textarea lets the user resize vertically.</p>
                </IgrTextarea>
                <IgrTextarea label="Resize: auto" resize="auto">                                       
                    <p slot="helper-text">This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.</p>
                </IgrTextarea>
            </div>
        );
    }
}

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

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

フォームの統合

以下のサンプルは、IgrTextarea をフォームに統合する方法を示しています。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrTextarea, IgrTextareaModule, IgrButton, IgrButtonModule, IgrToast, IgrToastModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrTextareaModule.register();
IgrButtonModule.register();
IgrToastModule.register();

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

    public toastRef: IgrToast;

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

    public render(): JSX.Element {
        return (
            <div className="sample">               
                <form id="form" onSubmit={this.onSubmitButtonClicked}>
                <IgrTextarea rows={3}  name="user_feedback" label="Your review" required>
                </IgrTextarea>                
                <div className="controls">
                    <IgrButton type="submit"><span>Submit review</span></IgrButton>
                    <IgrButton type="reset" variant="outlined"><span>Reset</span></IgrButton>                    
                </div>
                <IgrToast id="submitted" position="top" display-time="1e3" ref={this.onToastRef}><span>Your review was submitted</span></IgrToast>
                </form>
            </div>            
        );
    }

    public onToastRef(toast: IgrToast){
        if (!toast) { return; }
        this.toastRef = toast;
    }

    public onSubmitButtonClicked(e:React.FormEvent<HTMLFormElement>) {
        if(this.toastRef){
            e.preventDefault();
            this.toastRef.show();
        }
    }
}

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
.controls {
    margin-top: 1rem;
}
css

スタイル設定

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

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

igc-textarea::part(input) {
  background-color: var(--ig-info-100);
  border-color: var(--ig-primary-400);
}

igc-textarea::part(label) {
  color: var(--ig-gray-800);
}

igc-textarea::part(prefix),
igc-textarea::part(suffix) {
  color: var(--ig-primary-500-contrast);
  border-color: var(--ig-primary-500);
  background-color: var(--ig-primary-500);
}
css

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

IgrTextareaModule.register();
IgrIconModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrTextarea label="Steps to reproduce">
                    <span slot="prefix">
                    <IgrIcon ref={this.iconRef} name='feedback' collection="material"></IgrIcon>
                    </span>                    
                    <p slot="helper-text">Provide a detailed description of the steps that led to the issue you experienced</p>
                </IgrTextarea>
            </div>
        );
        
    }      

    public iconRef(icon: IgrIcon){
        if(!icon){
            return;
        }

        icon.registerIconFromText( "feedback",
        `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-360q17 0 28.5-11.5T520-400q0-17-11.5-28.5T480-440q-17 0-28.5 11.5T440-400q0 17 11.5 28.5T480-360Zm-40-160h80v-240h-80v240ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z"/></svg>`,
        "material");    
    } 
}


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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-textarea::part(input) {
    background-color: rgb(169, 214, 229);
    border-color: rgb(42, 111, 151);
}

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

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

React Text Area (テキストエリア) の概要

React テキストエリアの例

依存関係

プレフィックス、サフィックス、ヘルパーテキスト

テキストエリアのサイズ変更

フォームの統合

スタイル設定

API リファレンス

その他のリソース

React Text Area (テキスト エリア) の概要

React テキスト エリアの例

依存関係

プレフィックス、サフィックス、ヘルパー テキスト

テキスト エリアのサイズ変更

フォームの統合

スタイル設定

API リファレンス

その他のリソース

React Text Area (テキストエリア) の概要

React テキストエリアの例

プレフィックス、サフィックス、ヘルパーテキスト

テキストエリアのサイズ変更