私のブックマーク
ブックマークを追加
ブックマークを削除- デザインガイドライン
- 開発ガイドライン
- プロパティ
- afterIcon: string|Function|Component|null
- allowReset: boolean
- beforeIcon: string|Function|Component|null
- color: CSSProperties[‘color’]
- currentInput: number
- disabled: boolean
- help: string|Element
- hideLabelFromVision: boolean
- icon: string
- initialPosition: number
- isShiftStepEnabled: boolean
- label: string
- marks: Array|boolean
- onBlur: FocusEventHandler< HTMLInputElement >
- onChange: ( value?: number ) => void
- onFocus: FocusEventHandler< HTMLInputElement >
- onMouseLeave: MouseEventHandler< HTMLInputElement >
- onMouseMove: MouseEventHandler< HTMLInputElement >
- min: number
- max: number
- railColor: CSSProperties[ ‘color’ ]
- renderTooltipContent: ( value ) => value
- resetFallbackValue: number
- separatorType: ‘none’ | ‘fullWidth’ | ‘topFullWidth’
- shiftStep: number
- showTooltip: boolean
- step: number | ‘any’
- trackColor: CSSProperties[ ‘color’ ]
- type: string
- value: number
- withInputField: boolean
- __next40pxDefaultSize: boolean
- __nextHasNoMarginBottom: boolean
- 関連コンポーネント
デザインガイドライン
解剖学
RangeControl には以下の要素が含まれることがあります：
- 1. レール：レールはスライダーの全表面積を表し、ユーザーが選択できる最小値から最大値までを示します。左から右（LTR）言語の場合、最小値は最左端に、最大値は最右端に表示されます。右から左（RTL）言語の場合、この向きは逆になり、最小値は最右端に、最大値は最左端に表示されます。
- 2. トラック：トラックはレールの最小値から現在選択されている値までの部分を表します。
- 3. サム：サムはトラックに沿ってスライドし、その位置を通じて選択された値を表示します。
- 4. 値入力フィールド：値入力フィールドは現在選択されている特定の数値を表示します。
- 5. アイコン（オプション）：アイコンはスライダーの前または後に表示できます。
- 6. 目盛り（オプション）：目盛りは、ユーザーがスライダーを移動できるあらかじめ決められた値を表します。
タイプ
連続スライダー
連続スライダーは、ユーザーが主観的な範囲内で値を選択できるようにします。選択された数値は表示されません。数値を表示/編集することが重要でない場合、例えば音量のような場合に使用します。
離散スライダー
離散スライダーは、値入力フィールドを参照して特定の値に調整できます。数値を表示/編集することが重要な場合、例えばテキストサイズのような場合に使用します。
可能な選択肢は、サムがスナップする目盛りを使用して整理できます（または入力が切り上げまたは切り下げされます）。
動作
- クリックしてドラッグ：スライダーはサムをクリックしてドラッグすることで制御されます。
- クリックジャンプ：スライダーはトラックをクリックすることで制御されます。
- クリックと矢印：スライダーはサムをクリックし、その後矢印キーを使用して移動します。
- タブと矢印：スライダーはタブキーを使用して希望するスライダーのサムを選択し、その後矢印キーを使用して移動します。
- 値入力フィールド：離散スライダーには値入力フィールドがあります。テキスト入力が行われると、スライダーの位置は自動的に新しい値を反映するように更新されます。
- 目盛り（オプション）：離散スライダーはスライダートラックに沿って均等に配置された目盛りを使用でき、サムはそれにスナップします。各目盛りは、ユーザーにとって認識可能な増分で設定を変更する必要があります。
使用法
RangeControls は、トラックに沿った値の範囲を反映し、ユーザーが単一の値を選択できるようにします。音量、透明度、またはテキストサイズなどの設定を調整するのに最適です。
RangeControls は、トラックの両端にアイコンを持つことができ、値の範囲を反映します。
即時効果
RangeControls で行った変更は即時であり、ユーザーが好みを見つけるまで調整を行うことができます。フィードバックを提供するのに遅延がある設定と組み合わせるべきではありません。
しないこと
効果が即時でない場合は、RangeControls を使用しないでください。
現在の状態
RangeControls は、制御する設定の現在の状態を反映します。
値
編集可能な数値を持つ RangeControl
編集可能な数値：編集可能な数値は、ユーザーが RangeControl の正確な値を設定できるようにします。値を設定した後、サムの位置は新しい値に一致するように即座に更新されます。
しないこと
RangeControls は、値の範囲から選択を行うためのみに使用するべきです（例：値が2つだけの場合は RangeControl を使用しないでください）。
しないこと
RangeControls は、ユーザーが選択できる選択肢の完全な範囲を提供する必要があります（例：RangeControl の一部を無効にしないでください）。
開発ガイドライン
使用法
RangeControl をレンダリングして、増分値の範囲から選択を行います。
import { useState } from 'react';import { RangeControl } from '@wordpress/components';const MyRangeControl = () => {const [ columns, setColumns ] = useState( 2 );return(<RangeControl__nextHasNoMarginBottomlabel="Columns"value={ columns }onChange={ ( value ) => setColumns( value ) }min={ 2 }max={ 10 }/>);};
プロパティ
コンポーネントが受け入れるプロパティのセットは以下に示します。
このセットに含まれていないプロパティは、入力要素に適用されます。
afterIcon: string|Function|Component|null
このプロパティが追加されると、スライダーの後に アイコンコンポーネント がレンダリングされ、アイコンは afterIcon に等しくなります。
IconType に関する詳細は アイコンコンポーネント を参照してください。
allowReset: boolean
このプロパティが true の場合、スライダーをリセットするボタンがレンダリングされます。
beforeIcon: string|Function|Component|null
このプロパティが追加されると、スライダーの前に アイコンコンポーネント がレンダリングされ、アイコンは beforeIcon に等しくなります。
IconType に関する詳細は アイコンコンポーネント を参照してください。
color: CSSProperties[‘color’]
RangeControl ラッパーの CSS カラー文字列。
currentInput: number
value が現在 undefined の場合にフォールバックとして使用する現在の入力。
disabled: boolean
input を無効にし、新しい値が適用されないようにします。
help: string|Element
このプロパティが追加されると、ヘルププロパティをコンテンツとして使用してヘルプテキストが生成されます。
hideLabelFromVision: boolean
ラベルがスクリーンリーダーにのみ表示されるかどうかを制御します。
icon: string
スライダーの上に、そのコンテナタイトルの隣に表示されるアイコン。
initialPosition: number
スライダーの開始位置で、value が渡されない場合に使用されます。initialPosition は提供された min と max プロパティ値の間に制約されます。
isShiftStepEnabled: boolean
NumberControl コンポーネントにプロパティとして渡され、withInputField が true の場合にのみ適用されます。true の場合、数値入力にフォーカスがある間、UP または DOWN を SHIFT キーと一緒に押すと、shiftStep 値によって値が変更されます。
label: string
このプロパティが追加されると、ラベルプロパティをコンテンツとして使用してラベルが生成されます。
marks: Array|boolean
step の目盛りの視覚的表現をレンダリングします。カスタムマークインジケーターは Array によって提供できます。
例：
const marks = [{value: 0,label: '0',},{value: 1,label: '1',},{value: 8,label: '8',},{value: 10,label: '10',},];const MyRangeControl() {return ( <RangeControl marks={ marks } min={ 0 } max={ 10 } step={ 1 } /> )}
onBlur: FocusEventHandler< HTMLInputElement >
RangeControl 入力がフォーカスを失ったときのコールバック。
onChange: ( value?: number ) => void
新しい値を受け取る関数。値は max より小さく、min より大きくなります。リセット（allowReset によって有効）が発生した場合は、値は指定されている場合は resetFallbackValue で、そうでない場合は undefined になります。
onFocus: FocusEventHandler< HTMLInputElement >
RangeControl 入力がフォーカスを得たときのコールバック。
onMouseLeave: MouseEventHandler< HTMLInputElement >
RangeControl からマウスが出たときのコールバック。
onMouseMove: MouseEventHandler< HTMLInputElement >
RangeControl 内でマウスが移動したときのコールバック。
min: number
許可される最小 value。
max: number
許可される最大 value。
railColor: CSSProperties[ ‘color’ ]
レール要素の背景をカスタマイズするための CSS カラー文字列。
renderTooltipContent: ( value ) => value
値のレンダリングされた UI をカスタマイズする方法。例：
const customTooltipContent = value => `${value}%`const MyRangeControl() {return (<RangeControl renderTooltipContent={ customTooltipContent } />)}
resetFallbackValue: number
リセットボタンがクリックされた場合に戻る値（allowReset によって有効）
separatorType: ‘none’ | ‘fullWidth’ | ‘topFullWidth’
制御行の下/上のセパレーターラインを無効にするか、全幅にするかを定義します。デフォルトでは、コントロールアイコンの下に配置されます。
shiftStep: number
NumberControl コンポーネントにプロパティとして渡され、withInputField と isShiftStepEnabled の両方が true の場合にのみ適用されます。数値入力にフォーカスがある間、step の乗数として機能します。
showTooltip: boolean
ツールチップ UI を強制的に表示または非表示にします。step が特別な文字列値 any に設定されている場合、これは false に上書きされます。
step: number | ‘any’
value が変更される最小量。これは検証の要素でもあり、value は step の倍数でなければなりません（min でオフセットされます）有効です。特別な文字列値 any を受け入れ、検証制約を無効にし、withInputField と showTooltip プロパティの両方を false に上書きします。
trackColor: CSSProperties[ ‘color’ ]
トラック要素の背景をカスタマイズするための CSS カラー文字列。
type: string
値の選択がモバイルのボトムシートでステッパーコントロールまたはスライダーコントロールを表示するかどうかを定義します。ステッパーを使用するには、タイプ値を stepper に設定します。オプションが提供されていない場合は、デフォルトでスライダーになります。
value: number
範囲スライダーの現在の値。
withInputField: boolean
input 数値フィールドが RangeControl の隣にレンダリングされるかどうかを決定します。false が特別な文字列値 step に設定されている場合、これは false に上書きされます。
__next40pxDefaultSize: boolean
将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。
__nextHasNoMarginBottom: boolean
将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。
関連コンポーネント
- 数値入力をテキストフィールドで収集するには、
TextControlコンポーネントを使用します。
