Component Reference - ComboboxControl - 《WordPress開発者リソース》日本語

デザインガイドライン
開発ガイドライン
関連コンポーネント

デザインガイドライン

これらはSelectControlのものと同じですが、このコンポーネントは、スクロールや一度に読み込むアイテムが多すぎる場合に、ユーザーの入力に基づいてフィルタリングする必要があるときにより適しています。

開発ガイドライン

使用法

import { useState } from 'react';
import { ComboboxControl } from '@wordpress/components';
const options = [
   {
   value: 'small',
   label: 'Small',
   },
   {
   value: 'normal',
   label: 'Normal',
   },
   {
   value: 'large',
   label: 'Large',
   },
];
function MyComboboxControl() {
   const [ fontSize, setFontSize ] = useState();
   const [ filteredOptions, setFilteredOptions ] = useState( options );
   return (
   <ComboboxControl
   __nextHasNoMarginBottom
   label="Font Size"
   value={ fontSize }
   onChange={ setFontSize }
   options={ filteredOptions }
   onFilterValueChange={ ( inputValue ) =>
   setFilteredOptions(
   options.filter( ( option ) =>
   option.value === inputValue
   )
   )
   }
   />
   );
}

プロパティ

ラベル

コントロールのラベル。

タイプ: String
必須: はい

視覚からラベルを隠す

trueの場合、ラベルはスクリーンリーダーにのみ表示されます。

タイプ: Boolean
必須: いいえ

ヘルプ

このプロパティが追加されると、ヘルププロパティをコンテンツとして使用してヘルプテキストが生成されます。

タイプ: String
必須: いいえ

オプション

選択できるオプション。

タイプ: Array<{ value: string, label: string, disabled?: boolean }>
必須: はい

onFilterValueChange

コントロールの検索入力値が変更されたときに呼び出される関数。引数には次の入力値が含まれます。

タイプ: ( value: string ) => void
必須: いいえ

onChange

選択された値が変更されたときに呼び出される関数。

タイプ: ( value: string | null | undefined ) => void
必須: いいえ

値

コントロールの現在の値。

タイプ: string | null
必須: いいえ

フォーカス時に展開

コントロールがフォーカスされたときにドロップダウンを自動的に展開します。

コントロールがクリックされた場合、このプロパティに関係なくドロップダウンは展開されます。

タイプ: Boolean
必須: いいえ
デフォルト: true

プレースホルダー

渡された場合、コンボボックス入力は値が存在しない場合にプレースホルダーストリングを表示します。

タイプ: string
必須: いいえ

__experimentalRenderItem

提案リスト内の各オプションに対して呼び出されるカスタムレンダラー。レンダープロパティは、itemキーの下に単一のオプションのデータ（optionsプロパティに渡されたデータの配列から直接）を含むオブジェクトを引数として受け取ります。

タイプ: ( args: { item: object } ) => ReactNode
必須: いいえ

__next40pxDefaultSize

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

タイプ: Boolean
必須: いいえ
デフォルト: false

__nextHasNoMarginBottom

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。

タイプ: Boolean
必須: いいえ
デフォルト: false

ComboboxControl