テキストエリア

Textareaコンポーネントは、標準のtextarea要素にスタイル、キーフィルタリング、自動リサイズ機能を追加します。

インポート #


import Textarea from 'primevue/textarea';

基本 #

モデルは標準の v-model ディレクティブを使用してバインドできます。


<Textarea v-model="value" rows="5" cols="30" />

自動リサイズ #

autoResize が有効になっている場合、textareaはスクロールバーを表示する代わりに拡大します。


<Textarea v-model="value" autoResize rows="5" cols="30" />

フローティングラベル #

フォーカスされると、入力フィールドの上にフローティングラベルが表示されます。詳細については、FloatLabel のドキュメントをご覧ください。

ユーザー名


<FloatLabel>
    <Textarea v-model="value" rows="5" cols="30" />
    <label>Username</label>
</FloatLabel>

塗りつぶし #

コンポーネントをデフォルトの outlined スタイルよりも高い視覚的強調で表示するには、variant プロパティを filled として指定します。


<Textarea v-model="value" variant="filled" rows="5" cols="30" />

無効 #

検証の失敗を示すために、invalid プロパティを使用して無効な状態が表示されます。フォーム検証ライブラリと統合する場合に、このスタイルを使用できます。


<Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />

無効化 #

disabled が存在する場合、要素を編集およびフォーカスすることはできません。


<Textarea v-model="value" rows="5" cols="30" disabled />

アクセシビリティ #

スクリーンリーダー

Textareaコンポーネントは、渡されたプロパティを暗黙的に含むネイティブのtextarea要素をレンダリングします。コンポーネントを記述する値は、label タグと id プロパティを組み合わせて、または aria-labelledby、aria-label プロパティを使用して提供できます。


<label for="address1">Address 1</label>
<Textarea id="address1" />

<span id="address2">Address 2</span>
<Textarea aria-labelledby="address2" />

<Textarea aria-label="Address Details"/>

キーボードサポート

キー	機能
tab	フォーカスを入力に移動します。