NumberControl

使用法

import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
const Example = () => {
   const [ value, setValue ] = useState( 10 );
   return (
   <NumberControl
   isShiftStepEnabled={ true }
   onChange={ setValue }
   shiftStep={ 10 }
   value={ value }
   />
   );
};

プロパティ

dragDirection

値を増減させるドラッグ軸を決定します。

方向: n | e | s | w

• タイプ: String
• 必須: いいえ
• デフォルト: n
  

dragThreshold

isDragEnabled が true の場合、値が変更される前にドラッグされた px の量を制御します。

• タイプ: Number
• 必須: いいえ
• デフォルト: 10
  

spinControls

表示するスピンコントロールのタイプ。これらはユーザーが

数字を迅速に増減させるためのボタンです。

• ‘none’ – スピンコントロールを表示しません。
• ‘native’ – ブラウザのネイティブ HTML input コントロールを使用します。
• ‘custom’ – プラスとマイナスのアイコンボタンを使用します。
  • タイプ: String
  • 必須: いいえ
  • デフォルト: 'native'
    

isDragEnabled

true の場合、マウスのドラッグジェスチャーを有効にして数値を増減させます。ドラッグ中に SHIFT を押し続けると、shiftStep によって値が増加します。

• タイプ: Boolean
• 必須: いいえ
  

isShiftStepEnabled

true の場合、UP または DOWN を SHIFT キーと一緒に押すと、値が shiftStep の値だけ増加します。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: true
  

label

このプロパティが追加されると、ラベルプロパティをコンテンツとして使用してラベルが生成されます。

• タイプ: String
• 必須: いいえ
  

labelPosition

ラベルの位置（top、side、bottom、または edge）。

• タイプ: String
• 必須: いいえ
  

max

許可される最大 value。

• タイプ: Number
• 必須: いいえ
• デフォルト: Infinity
  

min

許可される最小 value。

• タイプ: Number
• 必須: いいえ
• デフォルト: -Infinity
  

onChange

入力の値が変更されるたびに呼び出されるコールバック。

コールバックは2つの引数を受け取ります:

• 1. newValue: 入力の新しい値
• 2. extra: event キーの下に元のブラウザイベントを含むオブジェクト。

コールバックの最初の引数として受け取る値は、有効な値であることが保証されていないことに注意してください（例: [min、max] プロパティで定義された範囲の外にあるか、step に一致しない可能性があります）。値の有効性を確認するには、コールバックの2番目の引数から event.target?.validity.valid プロパティを確認してください。

• タイプ: (newValue, extra) => void
• 必須: いいえ
  

required

true がコントロールの最小/最大範囲内で有効な数値を強制します。false が空の文字列を有効な値として許可します。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false
  

shiftStep

SHIFT キーが押されているときに増加する量。このシフト値は step 値の乗数です。たとえば、step 値が 5 で、shiftStep が 10 の場合、各ジャンプは 50 だけ増減します。

• タイプ: Number
• 必須: いいえ
• デフォルト: 10
  

step

増減時に value が変更される量。これは、value が step の倍数である必要があるため、検証の要素でもあります（指定されている場合は min でオフセットされます）。特別な文字列値 any を受け入れ、検証制約を無効にし、ステッピングアクションを 1 だけ増減させます。

• タイプ: Number | "any"
• 必須: いいえ
• デフォルト: 1
  

__next40pxDefaultSize

将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false