Text Area (テキスト領域)

Text Area コンポーネントを使用して、ユーザーが複数行に表示される長いテキストデータを入力して編集できるようにします。Text Area を使用すると、ユーザーはドラッグインジケーターによって領域のサイズを水平方向および垂直方向に変更できます。ユーザーは、Ignite UI for Angular Input Group コンポーネントをテキストとして装飾することで、Text Area コンポーネントを作成できます。

Text Area のデモ

タイプ

Figma では、ヒント付きとヒントなしのテキストエリアの選択肢が提供されており、Hint ブール値プロパティを使用してオン/オフを切り替えることができます。

ヒント付き	ヒントなし

操作状態

Text Area は、Disabled ブール値プロパティによって有効状態から無効状態に切り替えることができます。

Enabled	Disabled

状態

ユーザーが Text Area とインタラクティブに操作する際にさまざまな状態を経由します。コンテンツの代わりにプレースホルダーがある Idle、ユーザーが入力中の Focused、ユーザーがコンテンツの追加を完了して次に進むときの Filled。柔軟性が向上したことにより、Hi-Fi プロトタイプへシームレスにフローする動的なインタラクションデザインの作成が可能です。Figma では、右側のプロパティパネルの State プロパティを使用して状態を切り替えることができます。

Idle	Focused	Filled

経験豊富なデザイナーは、ユーザー入力を制限して無効な状態を防止するために、検証スタイルを使用します。検証スタイルは、Text Area で Success、Warning、Error を表示する洗練されたデザインを提供します。

Success	Warn	Error

Figma では、右側のプロパティパネルの State プロパティから状態を簡単に切り替えることができます。

サイズ変更

Text Area を使用すると、ユーザーは、新しい制約に合わせてテキストを自動的に調整しながら、右下隅にあるドラッグインジケーターによって領域のサイズを水平方向および垂直方向に変更できます。

スタイル設定

Text Area には、Background、Drag Indicator、Border、および Text の色によるスタイル設定の柔軟性があります。検証スタイルを変更するには、Indigo.Design ライブラリのそれぞれの色スタイルを更新することをお勧めします。

使用方法

Text Area を使用するときは、常にラベルを付ける必要があります。ラベルのないテキスト領域は不明瞭に表示されます。

良い例	悪い例