FocalPointPicker

使用法

import { useState } from 'react';
import { FocalPointPicker } from '@wordpress/components';
const Example = () => {
   const [ focalPoint, setFocalPoint ] = useState( {
   x: 0.5,
   y: 0.5,
   } );
   const url = '/path/to/image';
   /* Example function to render the CSS styles based on Focal Point Picker value */
   const style = {
   backgroundImage: `url(${ url })`,
   backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,
   };
   return (
   <>
   <FocalPointPicker
   __nextHasNoMarginBottom
   url={ url }
   value={ focalPoint }
   onDragStart={ setFocalPoint }
   onDrag={ setFocalPoint }
   onChange={ setFocalPoint }
   />
   <div style={ style } />
   </>
   );
};

プロパティ

url

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

表示される画像または動画のURL

自動再生

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

HTML5動画を自動再生します。これは動画ソース（url）にのみ適用されます。

値

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

焦点。xおよびyパラメータを含むオブジェクトである必要があります。

変更時

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

焦点が変更されたときに呼び出されるコールバック。

ドラッグ時

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

ドラッグ操作中に繰り返し呼び出されるコールバック。

ドラッグ終了時

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

ドラッグ操作の終了時に呼び出されるコールバック。

ドラッグ開始時

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

ドラッグ操作の開始時に呼び出されるコールバック。

ポイント解決

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

値の状態に対する内部更新の前に呼び出される関数。次の値を受け取り、変更された値を返すことができます。

__next40pxデフォルトサイズ

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

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

__nextマージンなしボトム

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

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