ColorPalette

使用法

import { useState } from 'react';
import { ColorPalette } from '@wordpress/components';
const MyColorPalette = () => {
   const [ color, setColor ] = useState ( '#f00' )
   const colors = [
   { name: 'red', color: '#f00' },
   { name: 'white', color: '#fff' },
   { name: 'blue', color: '#00f' },
   ];
   return (
   <ColorPalette
   colors={ colors }
   value={ color }
   onChange={ ( color ) => setColor( color ) }
   />
   );
} );

このコンポーネントをエディタの外で使用する場合、

Tooltipの位置を確認する

 `````Popover.Slot`````を要素ツリーのさらに上に配置し、
 `````SlotFillProvider`````全体の中に配置します。  
 <a name="props"></a>
## プロパティ
このコンポーネントは以下のプロパティを受け入れます。  
 <a name="clearable-boolean"></a>
### clearable: boolean
パレットにクリアボタンを持たせるかどうか。  
- 必須: いいえ 
- デフォルト: `````true

colors: PaletteObject[] | ColorObject[]

表示する色の配列。複数のカラーパレットを選択する場合、配列の形式は色オブジェクトの配列からカラーパレットの配列に変わります。

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

disableCustomColors: boolean

ユーザーが事前定義された選択肢（colorsプロパティで定義）に加えてカスタムカラーを選択できるかどうか。

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

enableAlpha: boolean

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

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

headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | ‘1’ | ‘2’ | ‘3’ | ‘4’ | ‘5’ | ‘6’

見出しのレベル。

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

value: string

現在アクティブな値。

• 必須: いいえ
  

onChange: OnColorChange

色が選択されたときに呼び出されるコールバック。

• 必須: はい
  

asButtons: boolean

コントロールがボタンのセットとして表示されるべきかどうか、それぞれにタブストップを持つ。

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

loop: boolean

キーボード操作がラップするのを防ぎます。asButtonsが真でないときのみ使用されます。

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