Blazor Text Area (テキスト エリア) の概要
Ignite UI for Blazor テキスト エリアは、複数行のプレーン テキスト編集コントロールを表します。レビュー フォームやフィードバック フォームへのコメントなど、ユーザーがかなりの量の自由形式のテキストを入力できるようにする場合に便利です。
Blazor テキスト エリアの例
依存関係
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTextareaModule));
スタイルを IgbTextarea コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbTextarea Rows="5" Label="Tell us your story:">It was a dark and stormy night...</IgbTextarea>
プレフィックス、サフィックス、ヘルパー テキスト
prefix スロットと suffix スロットを使用すると、テキスト エリアのメイン コンテンツの前後に異なるコンテンツを追加できます。helper-text スロットは、テキスト エリアの下に配置されたヒントを提供します。次のサンプルでは、テキスト プレフィックス、アイコン サフィックス、およびヒントとしてヘルパー テキストを含む新しいテキスト エリアフィールドを作成します。
テキスト エリアのサイズ変更
IgbTextarea には 3 つの異なるサイズ変更オプションがあります。none に設定すると、テキスト エリアのサイズは変更されず、スクロール バーを使用してオーバーフロー テキストが表示されます。vertical (デフォルトのオプション) に設定すると、テキスト エリアは垂直方向にサイズ変更できます。auto に設定すると、テキスト エリアにすべてのユーザー入力が一度に表示されます。オーバーフローしたテキストは新しい行に折り返され、テキスト エリアが自動的に拡張されます。
フォームの統合
以下のサンプルは、IgbTextarea をフォームに統合する方法を示しています。
スタイル設定
IgbTextarea コンポーネントは、その内部要素のほとんどすべての 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);
}