Dropdown

使用法

import { Button, Dropdown } from '@wordpress/components';
const MyDropdown = () => (
   <Dropdown
   className="my-container-class-name"
   contentClassName="my-popover-content-classname"
   popoverProps={ { placement: 'bottom-start' } }
   renderToggle={ ( { isOpen, onToggle } ) => (
   <Button
   variant="primary"
   onClick={ onToggle }
   aria-expanded={ isOpen }
   >
   Toggle Popover!
   </Button>
   ) }
   renderContent={ () => <div>This is the content of the popover.</div> }
   />
);

プロパティ

コンポーネントは以下のプロパティを受け入れます。このセットに含まれていないプロパティは、Popover コンテンツをラップする要素に適用されます。

className: string

グローバルコンテナの className

• 必須: いいえ
  

contentClassName: string

スタイリング目的でドロップダウンメニューをターゲットにしたい場合は、contentClassName を提供する必要があります。これはコンテナノードの子としてレンダリングされないためです。

• 必須: いいえ
  

defaultOpen: boolean

初期レンダリング時のドロップダウンのオープン状態。オープン状態を制御する必要がない場合に使用します。コンポーネントの最初のレンダリングで指定されている場合、open プロパティによって上書きされます。

• 必須: いいえ
  

expandOnMobile: boolean

モバイルでポップオーバーを全画面表示するためのオプトインプロパティ。

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

focusOnMount: ‘firstElement’ | boolean

デフォルトでは、ポップオーバー内の 最初のタブ可能要素 がマウント時にフォーカスを受け取ります。これはこのプロパティを "firstElement" に設定するのと同じです。

true 値を指定すると、代わりにコンテナにフォーカスが移ります。

false 値を指定すると、フォーカス処理が完全に無効になります（これは適切なアクセシブルな代替動作が存在する場合にのみ行うべきです）。

• 必須: いいえ
• デフォルト: "firstElement"
  

headerTitle: string

モバイルで全画面表示されているときにドロップダウンのヘッダーに表示されるテキストをカスタマイズするためにこれを設定します。

• 必須: いいえ
  

onClose: () => void

ポップオーバーを閉じるべきときに呼び出されるコールバック。

• 必須: いいえ
  

open: boolean

ドロップダウンの制御されたオープン状態。onToggle と一緒に使用する必要があります。

• 必須: いいえ
  

onToggle: ( willOpen: boolean ) => void

ドロップダウンの状態がオープンからクローズ、またはその逆に変わるときに呼び出されるコールバック。

• 必須: いいえ
  

popoverProps: WordPressComponentProps< Omit< PopoverProps, ‘children’ > ‘div’, false >

popoverProps オブジェクトのプロパティは、Popover コンポーネントにプロパティとして渡されます。

このオブジェクトを使用して、Popover コンポーネントで既に公開されていないプロパティ/機能にアクセスします。たとえば、矢印なしでポップオーバーを持つ機能などです。

• 必須: いいえ
  

renderContent: ( props: CallbackProps ) => ReactNode

ドロップダウンメニューのコンテンツをレンダリングするために呼び出されるコールバック。

• isOpen: ドロップダウンメニューが開いているかどうか
• onToggle: ドロップダウンメニューの状態をオープンからクローズ、またはその逆に切り替える関数
• onClose: 呼び出されるとメニューを閉じる関数
• 必須: はい
  

renderToggle: ( props: CallbackProps ) => ReactNode

ドロップダウントグルボタンをレンダリングするために呼び出されるコールバック。

そのプロパティは renderContent プロパティと同じです。

• 必須: はい
  

style: React.CSSProperties

グローバルコンテナのスタイル

• 必須: いいえ