Web Components Text Area (テキスト エリア) の概要
Ignite UI for Web Components テキスト エリアは、複数行のプレーン テキスト編集コントロールを表します。レビュー フォームやフィードバック フォームへのコメントなど、ユーザーがかなりの量の自由形式のテキストを入力できるようにする場合に便利です。
Web Components テキスト エリアの例
依存関係
開始するには、typescript ファイルに IgcTextareaComponent をインポートし、次のように defineComponents() 関数を呼び出してコンポーネントを登録する必要があります。
import { defineComponents, IgcTextareaComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcTextareaComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
IgcTextareaComponent コンポーネントをインポートしたら、使用を開始する準備ができているので、最初の Text Area を追加しましょう。
<igc-textarea rows="5" label="Tell us your story:">It was a dark and stormy night...</igc-textarea>
プレフィックス、サフィックス、ヘルパー テキスト
prefix スロットと suffix スロットを使用すると、テキスト エリアのメイン コンテンツの前後に異なるコンテンツを追加できます。helper-text スロットは、テキスト エリアの下に配置されたヒントを提供します。次のサンプルでは、テキスト プレフィックス、アイコン サフィックス、およびヒントとしてヘルパー テキストを含む新しいテキスト エリアフィールドを作成します。
テキスト エリアのサイズ変更
IgcTextareaComponent には 3 つの異なるサイズ変更オプションがあります。none に設定すると、テキスト エリアのサイズは変更されず、スクロール バーを使用してオーバーフロー テキストが表示されます。vertical (デフォルトのオプション) に設定すると、テキスト エリアは垂直方向にサイズ変更できます。auto に設定すると、テキスト エリアにすべてのユーザー入力が一度に表示されます。オーバーフローしたテキストは新しい行に折り返され、テキスト エリアが自動的に拡張されます。
テキスト エリアの属性の完全なリストは IgcTextareaComponent API にあります。
フォームの統合
以下のサンプルは、IgcTextareaComponent をフォームに統合する方法を示しています。
スタイル設定
IgcTextareaComponent コンポーネントは、その内部要素のほとんどすべての 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);
}