開発ガイドライン

使用法

追加の CSS クラスの名前を入力するためのユーザーインターフェースをレンダリングします。 

  1. import { useState } from 'react';
  2. import { __ } from '@wordpress/i18n';
  3. import { SearchControl } from '@wordpress/components';
  5. function MySearchControl( { className, setState } ) {
  6.    const [ searchInput, setSearchInput ] = useState( '' );
  8.    return (
  9.    <SearchControl
  10.    __nextHasNoMarginBottom
  11.    label={ __( 'Search posts' ) }
  12.    value={ searchInput }
  13.    onChange={ setSearchInput }
  14.    />
  15.    );
  16. }

プロパティ

コンポーネントが受け入れるプロパティのセットは以下に指定されます。

このセットに含まれていないプロパティは、入力要素に適用されます。

ラベル

入力のアクセシブルなラベル。

プレースホルダーが定義されている場合でも、アクセシビリティのベストプラクティスとして常にラベルを提供する必要があります。

そして hideLabelFromVision は true です。

  • タイプ: String
  • 必須: いいえ
  • デフォルト: ( 'Search' )

プレースホルダー

このプロパティが追加されると、入力用に特定のプレースホルダーが使用されます。

  • タイプ: String
  • 必須: いいえ
  • デフォルト: ( 'Search' )

値

入力の現在の値。

  • タイプ: String
  • 必須: いいえ

クラス名

ラッパー div のクラスに追加されるクラス。

  • タイプ: String
  • 必須: いいえ

変更時

入力の値を受け取る関数。

  • タイプ: function
  • 必須: はい

閉じる時

onClose コールバックが提供されると、検索コントロールは指定されたコールバックをトリガーする閉じるボタンをレンダリングします。

これは、ボタンが入力値をクリアするだけでなく、検索フィールド全体を閉じるための独自のロジックをトリガーする場合に使用します。

  • タイプ: function
  • 必須: いいえ

ヘルプ

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

  • タイプ: String|Element
  • 必須: いいえ

視覚からラベルを隠す

true の場合、ラベルは表示されませんが、スクリーンリーダーによって読み上げられます。デフォルトは true です。

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

__nextHasNoMarginBottom

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

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

サイズ: ‘デフォルト’ | ‘コンパクト’

コンポーネントのサイズ。

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

関連コンポーネント

  • ユーザーに入力のためのより制約されたオプションを提供するには、TextControl、SelectControl、RadioControl、CheckboxControl、または RangeControl を使用します。