React Text Area (テキスト エリア) の概要
Ignite UI for React テキスト エリアは、複数行のプレーン テキスト編集コントロールを表します。レビュー フォームやフィードバック フォームへのコメントなど、ユーザーがかなりの量の自由形式のテキストを入力できるようにする場合に便利です。
React テキスト エリアの例
依存関係
テキスト エリア コンポーネントの使用を開始するには、最初にそのモジュールを登録する必要があります。
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrTextarea とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrTextareaModule, IgrTextarea } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrTextareaModule.register();
<IgrTextarea rows="5" label="Tell us your story:"><span>It was a dark and stormy night...</span></IgrTextarea>
プレフィックス、サフィックス、ヘルパー テキスト
prefix スロットと suffix スロットを使用すると、テキスト エリアのメイン コンテンツの前後に異なるコンテンツを追加できます。helper-text スロットは、テキスト エリアの下に配置されたヒントを提供します。次のサンプルでは、テキスト プレフィックス、アイコン サフィックス、およびヒントとしてヘルパー テキストを含む新しいテキスト エリアフィールドを作成します。
テキスト エリアのサイズ変更
IgrTextarea には 3 つの異なるサイズ変更オプションがあります。none に設定すると、テキスト エリアのサイズは変更されず、スクロール バーを使用してオーバーフロー テキストが表示されます。vertical (デフォルトのオプション) に設定すると、テキスト エリアは垂直方向にサイズ変更できます。auto に設定すると、テキスト エリアにすべてのユーザー入力が一度に表示されます。オーバーフローしたテキストは新しい行に折り返され、テキスト エリアが自動的に拡張されます。
フォームの統合
以下のサンプルは、IgrTextarea をフォームに統合する方法を示しています。
スタイル設定
Text Area コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。次の表に、Input によって公開されるすべての CSS パーツを示します:
| 名前 | 説明 |
|---|---|
| container | すべての主要な入力要素を保持するメイン ラッパー。 |
| input | ネイティブ input 要素。 |
| label | ネイティブ label 要素。 |
| prefix | プレフィックス ラッパー。 |
| suffix | サフィックス ラッパー。 |
| helper-text | ヘルパー テキスト ラッパー。 |
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);
}