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 コンポーネントをインポートしたら、使用を開始する準備ができているので、最初の Text Area を追加しましょう。

<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 パーツを示します:

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);
}

API リファレンス

その他のリソース

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