CustomSelectControl

デザインガイドライン

これらはSelectControlのものと同じです。

開発ガイドライン

使用法

import { useState } from 'react';
import { CustomSelectControl } from '@wordpress/components';
const options = [
   {
   key: 'small',
   name: 'Small',
   style: { fontSize: '50%' },
   },
   {
   key: 'normal',
   name: 'Normal',
   style: { fontSize: '100%' },
   },
   {
   key: 'large',
   name: 'Large',
   style: { fontSize: '200%' },
   },
   {
   key: 'huge',
   name: 'Huge',
   style: { fontSize: '300%' },
   },
];
function MyCustomSelectControl() {
   const [ , setFontSize ] = useState();
   return (
   <CustomSelectControl
   label="Font Size"
   options={ options }
   onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
   />
   );
}
function MyControlledCustomSelectControl() {
   const [ fontSize, setFontSize ] = useState( options[ 0 ] );
   return (
   <CustomSelectControl
   label="Font Size"
   options={ options }
   onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
   value={ options.find( ( option ) => option.key === fontSize.key ) }
   />
   );
}

プロパティ

className: string

コンポーネントのオプションのクラス名。

• 必須: いいえ

hideLabelFromVision: boolean

視覚的にラベルを隠しますが、支援技術には利用可能です。

• 必須: いいえ

describedBy: string

支援技術によって使用される選択トリガーボタンの説明。値が渡されない場合、テキスト「現在選択されている: selectedItem.name」が完全に翻訳されて使用されます。

• 必須: いいえ

label: string

コントロールのラベル。

• 必須: はい

onChange: ( newValue: ChangeObject ) => void

コントロールの内部状態が変更されたときに呼び出される関数。selectedItemプロパティには次に選択されたアイテムが含まれます。

• 必須: いいえ

options: Array< Option >

選択可能なオプションのリスト。

• 必須: はい

size: ‘default’ | ‘small’ | ‘__unstable-large’

コントロールのサイズ。

• デフォルト: 'default'
• 必須: いいえ

showSelectedHint: boolean

トリガーボタンに選択されたアイテムのヒントを表示します。

• 必須: いいえ

value: Option

上記のMyControlledCustomSelectControlの例のように、コントロールの値を外部から制御するために使用できます。

• 必須: いいえ

onMouseOver: MouseEventHandler< HTMLButtonElement >

トリガーボタンのmouseoverイベント用のハンドラー。

• 必須: いいえ

onMouseOut: MouseEventHandler< HTMLButtonElement >

トリガーボタンのmouseoutイベント用のハンドラー。

• 必須: いいえ

onFocus: FocusEventHandler< HTMLButtonElement >

トリガーボタンのfocusイベント用のハンドラー。

• 必須: いいえ

onBlur: FocusEventHandler< HTMLButtonElement >

トリガーボタンのblurイベント用のハンドラー。

• 必須: いいえ

__next40pxDefaultSize: boolean

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

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

関連コンポーネント

• このコンポーネントのようですが、カスタムスタイリングが必要ない場合にネイティブ<select>を使用して実装されたSelectControlコンポーネント。
• 一度にすべての利用可能なオプションを表示したい場合、セットから1つのオプションを選択するにはRadioコンポーネントを使用します。
• セットから1つまたは複数のアイテムを選択するにはCheckboxControlコンポーネントを使用します。
• 単一の設定をオンまたはオフに切り替えるにはToggleControlコンポーネントを使用します。
• アイテムが多い場合は、ComboboxControlがより適しているかもしれません。