開発ガイドライン

BorderBoxControl は実質的に2つのビュー状態を持っています。最初の「リンクされた」ビューでは、単一の BorderControl を介してフラットなボーダーを構成できます。2番目の「分割」ビューでは、各側に BorderControl があり、現在選択されているボーダーのビジュアライザーも含まれています。各ビューには、2つの間で切り替えるためのボタンも含まれています。「分割」ビューから「リンクされた」ビューに切り替えるとき、個々の側のボーダーが一貫していない場合、「リンクされた」ビューは一貫しているボーダーのプロパティ選択を表示し、一貫していないものには混合状態を示します。たとえば、すべてのボーダーが同じ色とスタイルを持っているが異なる幅を持っている場合、「リンクされた」ビューの BorderControl のボーダードロップダウンは一貫した色とスタイルを示しますが、「リンクされた」ビューの幅入力は「混合」というプレースホルダーテキストを表示します。

使用法

  1. import { useState } from 'react';
  2. import { BorderBoxControl } from '@wordpress/components';
  3. import { __ } from '@wordpress/i18n';
  5. const colors = [
  6.    { name: 'Blue 20', color: '#72aee6' },
  7.    // ...
  8. ];
  10. const MyBorderBoxControl = () => {
  11.    const defaultBorder = {
  12.    color: '#72aee6',
  13.    style: 'dashed',
  14.    width: '1px',
  15.    };
  16.    const [ borders, setBorders ] = useState( {
  17.    top: defaultBorder,
  18.    right: defaultBorder,
  19.    bottom: defaultBorder,
  20.    left: defaultBorder,
  21.    } );
  22.    const onChange = ( newBorders ) => setBorders( newBorders );
  24.    return (
  25.    <BorderBoxControl
  26.    colors={ colors }
  27.    label={ __( 'Borders' ) }
  28.    onChange={ onChange }
  29.    value={ borders }
  30.    />
  31.    );
  32. };

このコンポーネントをエディタの外で使用する場合、BorderBoxControl の色とスタイルオプションのために、Tooltip の位置を 確認する できます。BorderBoxControl を Popover.Slot で要素ツリーのさらに上にレンダリングし、SlotFillProvider 全体内に配置します。

プロパティ

colors: ( PaletteObject | ColorObject )[]

色の定義の配列です。これは、色が複数の起源によって整理される多次元配列でもかまいません。各色は、name と color の値を含むオブジェクトである場合があります。

  • 必須: いいえ
  • デフォルト: []

disableCustomColors: boolean

カスタムカラーを選択する機能を切り替えます。

  • 必須: いいえ

enableAlpha: boolean

カスタムカラーを選択する際にアルファチャンネルを提供するかどうかを制御します。

  • 必須: いいえ
  • デフォルト: false

enableStyle: boolean

ボーダースタイルの選択をサポートするかどうかを制御します。

  • 必須: いいえ
  • デフォルト: true

hideLabelFromVision: boolean

ラベルがスクリーンリーダーにのみ表示されるかどうかを制御します。

  • 必須: いいえ

label: string

提供される場合、この内容を使用してラベルが生成されます。
それがスクリーンリーダーにのみ表示されるかどうかは hideLabelFromVision によって制御されます。

  • 必須: いいえ

onChange: ( value?: Object ) => void

ボーダーの値が変更されたときに呼び出されるコールバック関数です。受け取る値は、「フラット」ボーダーオブジェクト、個々の側のボーダーを定義するプロパティを持つオブジェクト、または undefined である場合があります。
注: ユーザーがすべてのボーダーをクリアすると、undefined になります。

  • 必須: はい

popoverPlacement: string

コントロールラッパーに対するカラーポップオーバーの位置です。
デフォルトでは、ポップオーバーはポップオーバーを開始したボタンに対して表示されます。ポップオーバーの配置を指定することで、ポップオーバーを特定の位置に表示することが強制されます。
利用可能な基本配置は「上」、「右」、「下」、「左」です。これらの基本配置には、-start および -end の形式の整列があります。たとえば、「右-start」または「下-end」です。これにより、ツールチップをボタンの端に整列させることができ、中央に配置するのではなくなります。

  • 必須: いいえ

popoverOffset: number

ポップオーバーとコントロールラッパーの間のスペースです。

  • 必須: いいえ

size: string

コントロールのサイズです。

  • 必須: いいえ
  • デフォルト: default
  • 許可される値: default, unstable-large

value: Object

現在のボーダー構成を表すオブジェクトです。
これは、color、style、および width のプロパティを持つ「フラット」ボーダーであるか、各側のために前述のプロパティを定義する「分割」ボーダーである場合があります。top、right、bottom、および left。
例: 

  1. const flatBorder = { color: '#72aee6', style: 'solid', width: '1px' };
  2. const splitBorders = {
  3.    top: { color: '#72aee6', style: 'solid', width: '1px' },
  4.    right: { color: '#e65054', style: 'dashed', width: '2px' },
  5.    bottom: { color: '#68de7c', style: 'solid', width: '1px' },
  6.    left: { color: '#f2d675', style: 'dotted', width: '1em' },
  7. };
  • 必須: いいえ

__next40pxDefaultSize: boolean

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

  • 必須: いいえ
  • デフォルト: false