GradientPicker

使用法

グラデーションピッカーをレンダリングします。

import { useState } from 'react';
import { GradientPicker } from '@wordpress/components';
const myGradientPicker = () => {
   const [ gradient, setGradient ] = useState( null );
   return (
   <GradientPicker
   value={ gradient }
   onChange={ ( currentGradient ) => setGradient( currentGradient ) }
   gradients={ [
   {
   name: 'JShine',
   gradient:
   'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
   slug: 'jshine',
   },
   {
   name: 'Moonlit Asteroid',
   gradient:
   'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
   slug: 'moonlit-asteroid',
   },
   {
   name: 'Rastafarie',
   gradient:
   'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
   slug: 'rastafari',
   },
   ] }
   />
   );
};

プロパティ

コンポーネントは以下のプロパティを受け入れます:

className: string

ラッパーに追加されるクラス名です。

• 必須: いいえ
  

value: string

グラデーションの現在の値です。linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)のようなCSSグラデーションを渡します。オプションで、現在選択されていないことを指定するためにnullの値を渡すことができます。

• 必須: いいえ
• デフォルト: linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)
  

onChange: ( currentGradient: string | undefined ) => void

新しいグラデーションが定義されたときに呼び出される関数です。currentGradientが引数として渡されます。

• 必須: はい
  

gradients: GradientsProp[]

グラデーションセレクターの上に表示される事前定義されたグラデーションのオブジェクトの配列です。

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

clearable: boolean

パレットにクリアボタンがあるかどうかです。

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

disableCustomGradients: boolean

trueの場合、グラデーションピッカーは表示されず、gradientsから定義されたグラデーションのみが利用可能です。

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

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

見出しのレベルです。複数の起源からグラデーションが提供される場合にのみ適用されます（つまり、gradientsプロパティとして渡された配列に2つ以上のアイテムが含まれている場合）。

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

asButtons: boolean

コントロールがボタンのセットとして表示されるべきかどうか、各ボタンには独自のタブストップがあります。

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

loop: boolean

キーボード操作がラップするのを防ぎます。asButtonsがtrueでない場合にのみ使用されます。

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