BorderControl

開発ガイドライン

BorderControl は、ユーザーがボーダーのさまざまなプロパティを設定できる内部サブコンポーネントをまとめています。最初のサブコンポーネントである BorderDropdown は、ボーダーの色とスタイルを表すオプションを含んでいます。ボーダーの幅は UnitControl とオプションの RangeControl を介して制御されます。ボーダー半径は、このコントロールではカバーされていません。なぜなら、色、スタイル、幅とは別に設定されることが望ましい場合があるからです。たとえば、ボーダー半径は「形状」抽象の下に吸収されることがあります。

使用法

import { useState } from 'react';
import { BorderControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const colors = [
   { name: 'Blue 20', color: '#72aee6' },
   // ...
];
const MyBorderControl = () => {
   const [ border, setBorder ] = useState();
   return (
   <BorderControl
   colors={ colors }
   label={ __( 'Border' ) }
   onChange={ setBorder }
   value={ border }
   />
   );
};

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

プロパティ

colors: ( PaletteObject | ColorObject )[]

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

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

disableCustomColors: boolean

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

• 必須: いいえ
  

disableUnits: boolean

単位選択を無効にするかどうかを制御します。

• 必須: いいえ
  

enableAlpha: boolean

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

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

enableStyle: boolean

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

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

hideLabelFromVision: boolean

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

• 必須: いいえ
  

isCompact: boolean

BorderControl をよりコンパクトな外観でレンダリングするフラグです。これにより、コントロールの幅が制限され、追加のスペースを取ることができなくなります。

• 必須: いいえ
  

label: string

提供された場合、これをコンテンツとして使用してラベルが生成されます。

スクリーンリーダーにのみ表示されるかどうかは hideLabelFromVision によって制御されます。

• 必須: いいえ
  

onChange: ( value?: Object ) => void

ボーダーの値が、ボーダーの色、スタイル、または幅を選択またはクリアするインタラクションを介して変更されたときに呼び出されるコールバック関数です。

注: ユーザーがすべてのボーダープロパティをクリアした場合、値は undefined になることがあります。

• 必須: はい
  

shouldSanitizeBorder: boolean

オプトインした場合、ボーダーをサニタイズすることは、幅や色が選択されていない場合、ボーダースタイルもクリアされ、undefined が新しいボーダー値として返されることを意味します。

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

size: string

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

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

value: Object

ボーダーまたは undefined を表すオブジェクトです。このコンポーネントの現在のボーダー設定を設定するために使用されます。

例:

{
   color: '#72aee6',
   style: 'solid',
   width: '2px,
}

• 必須: いいえ
  

width: CSSProperties[ ‘width’ ]

BorderControl の視覚的な幅を制御します。isCompact プロパティが true に設定されている場合、効果はありません。

• 必須: いいえ
  

withSlider: boolean

この BorderControl がボーダーの幅に対する追加の制御のために RangeControl をレンダリングするかどうかを示します。

• 必須: いいえ
  

__next40pxDefaultSize: boolean

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

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