云策 WordPress 开发者社区

块编辑器开发文档

AnglePickerControl

查看官方原文 ↗
💡 云策文档标注

概述

AnglePickerControl 是一个 React 组件，用于渲染允许用户选择角度的 UI。用户可以通过在圆形内拖动角度指示器或直接在文本字段中输入角度来交互式地选择角度。

关键要点

  • AnglePickerControl 是 WordPress 组件库中的 React 组件，用于角度选择。
  • 组件支持视觉拖动和文本输入两种方式设置角度值。
  • 主要 Props 包括 value（当前角度值）、onChange（值变化回调函数）、label（标签文本）和 as（渲染元素或组件）。
  • value 应为 0 到 360 之间的数字或字符串，表示角度度数。

代码示例

import { useState } from '@wordpress/element';
import { AnglePickerControl } from '@wordpress/components';

function Example() {
  const [ angle, setAngle ] = useState( 0 );
  return (
    <AnglePickerControl
      value={ angle }
      onChange={ setAngle }
    />
  );
}

注意事项

  • onChange 是必需 Prop，接收新角度值作为参数。
  • value 是必需 Prop，应确保在 0 到 360 范围内。
  • label 默认为 'Angle'，可自定义标签文本。
  • as Prop 允许自定义渲染的 HTML 元素或 React 组件。
📄 原文内容

See the WordPress Storybook for more detailed, interactive documentation.

AnglePickerControl is a React component to render a UI that allows users to
pick an angle. Users can choose an angle in a visual UI with the mouse by
dragging an angle indicator inside a circle or by directly inserting the
desired angle in a text field.

import { useState } from '@wordpress/element';
import { AnglePickerControl } from '@wordpress/components';

function Example() {
  const [ angle, setAngle ] = useState( 0 );
  return (
    <AnglePickerControl
      value={ angle }
      onChange={ setAngle }
    />
  );
}

Props

as

  • Type: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...
  • Required: No

The HTML element or React component to render the component as.

label

  • Type: string
  • Required: No
  • Default: __( 'Angle' )

Label to use for the angle picker.

onChange

  • Type: (value: number) => void
  • Required: Yes

A function that receives the new value of the input.

value

  • Type: string | number
  • Required: Yes

The current value of the input. The value represents an angle in degrees
and should be a value between 0 and 360.