InputNumber は数値入力を提供する入力コンポーネントです。
import InputNumber from 'primevue/inputnumber';
InputNumber は、v-model プロパティを持つ制御された入力として使用されます。
<InputNumber v-model="value1" inputId="integeronly" fluid />
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
グループ化や小数点の記号などのローカライズ情報は、デフォルトでユーザーのロケールに設定される locale プロパティで定義されます。
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
通貨値は、mode プロパティを currency として設定することで有効になります。この設定では、currency プロパティも、米ドルを表す "USD" のような ISO 4217 標準を使用して定義する必要があります。
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
カスタムテキスト（例：単位）は、prefix および suffix プロパティを使用して、入力セクションの前または後に配置できます。
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
スピナーボタンは、showButtons プロパティを使用して有効になり、レイアウトは buttonLayout で定義されます。
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
ボタンは、buttonLayout を vertical として設定することで、垂直に配置することもできます。
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
フォーカスすると、入力フィールドの上にフロートラベルが表示されます。詳細については、FloatLabel のドキュメントを参照してください。
<FloatLabel>
<InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label>
</FloatLabel>
デフォルトの outlined スタイルよりも視覚的に強調されたコンポーネントを表示するには、variant プロパティを filled として指定します。
<InputNumber v-model="value" variant="filled" />
無効状態は、検証の失敗を示すために invalid prop を使用して表示されます。このスタイルは、フォーム検証ライブラリと統合するときに使用できます。
<InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" />
disabled が存在する場合、要素は編集およびフォーカスできません。
<InputNumber v-model="value" disabled prefix="%" />
コンポーネントを説明する値は、inputId prop と組み合わせた label タグを使用するか、aria-labelledby、aria-label props を使用して提供できます。入力要素は、aria-valuemin、aria-valuemax、aria-valuenow 属性に加えて、spinbutton ロールを使用します。
<label for="price">Price</label>
<InputNumber inputId="price" />
<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />
<InputNumber aria-label="Number" />
| キー | 機能 |
|---|---|
| tab | 入力をフォーカスします。 |
| 上矢印 | 値を増やします。 |
| 下矢印 | 値を減らします。 |
| home | 最小値が指定されている場合は、最小値を設定します。 |
| end | 最大値が指定されている場合は、最大値を設定します。 |