DimensionControl

使用法

import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
export default function MyCustomDimensionControl() {
   const [ paddingSize, setPaddingSize ] = useState( '' );
   return (
   <DimensionControl
   __nextHasNoMarginBottom
   label={ 'Padding' }
   icon={ 'desktop' }
   onChange={ ( value ) => setPaddingSize( value ) }
   value={ paddingSize }
   />
   );
}

注: デフォルトでは、現在の次元値の初期 value プロパティを提供しない場合、値は選択されません（つまり、デフォルトの次元は設定されていません）。

プロパティ

ラベル

• タイプ: string
• 必須: はい

コントロールの人間が読み取れるラベルです。

値

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

次元UIコントロールの現在の値です。提供されると、UIは自動的に値を選択します。

サイズ

• タイプ: { name: string; slug: string }[]
• デフォルト: packages/block-editor/src/components/dimension-control/sizes.ts を参照
• 必須: いいえ

次の形状のサイズオブジェクトのオプション配列です：

[
   {
   name: __( 'Small' ),
   slug: 'small',
   },
   {
   name: __( 'Medium' ),
   slug: 'small',
   },
   // ...etc
]

デフォルトでは、一連の相対サイズ（small、medium…など）が提供されます。packages/block-editor/src/components/dimension-control/sizes.jsを参照してください。

アイコン

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

コントロールラベルの前に表示するオプションのダッシュアイコンです。

onChange

• タイプ: ( value?: string ) => void;
• 必須: いいえ
• 引数::
  • size – 選択されたサイズを表す文字列（例: medium）

間隔サイズの値が変更されたとき（選択/クリックされたとき）にトリガーされるコールバックです。

クラス名

• タイプ: string
• デフォルト: ''
• 必須: いいえ

コントロールコンポーネントに追加されるクラスの文字列です。

__next40pxDefaultSize

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

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

__nextHasNoMarginBottom

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

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。