Popover

使用法

ポップオーバーをそのコンテナの隣に表示します。

コンポーネントからポップオーバーが返されると、それが表示されます。ポップオーバーを非表示にするには、単にコンポーネントのレンダー値からそれを省略してください。

import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
const MyPopover = () => {
   const [ isVisible, setIsVisible ] = useState( false );
   const toggleVisible = () => {
   setIsVisible( ( state ) => ! state );
   };
   return (
   <Button variant="secondary" onClick={ toggleVisible }>
   Toggle Popover!
   { isVisible && <Popover>Popover is toggled!</Popover> }
   </Button>
   );
};

明示的なアンカーを渡すには、anchorプロパティを使用できます。その際、アンカー要素はローカルステートに保存する必要があります。そうすることで、変更時に反応的に更新されます。

import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
const MyPopover = () => {
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
   const [ popoverAnchor, setPopoverAnchor ] = useState();
   const [ isVisible, setIsVisible ] = useState( false );
   const toggleVisible = () => {
   setIsVisible( ( state ) => ! state );
   };
   return (
   <p ref={ setPopoverAnchor }>Popover s anchor</p>
   <Button variant="secondary" onClick={ toggleVisible }>
   Toggle Popover!
   </Button>
   { isVisible && (
   <Popover
   anchor={ popoverAnchor }
   >
   Popover is toggled!
   </Popover>
   ) }
   );
};

デフォルトでは、ポップオーバーはドキュメントのボディの最後にレンダリングされます。ポップオーバー要素をページの特定の位置にレンダリングしたい場合は、要素ツリーのさらに上にPopover.Slotをレンダリングする必要があります：

import { createRoot } from 'react-dom/client';
import { Popover } from '@wordpress/components';
import Content from './Content';
const app = document.getElementById( 'app' );
const root = createRoot( app );
root.render(
   <div>
   <Content />
   <Popover.Slot />
   </div>
);

プロパティ

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

anchor: Element | VirtualElement | null

ポップオーバーのPopoverがアンカーとして使用する要素です。Elementであるか、またはVirtualElementであることができます。つまり、getBoundingClientRect()およびownerDocumentプロパティが定義されたオブジェクトです。

要素は、変更時に反応的に更新されるように、プレーンな参照ではなくステートに保存する必要があります。

• 必須: いいえ
  

anchorRect: DomRectWithOwnerDocument

注: このプロパティは非推奨です。代わりにanchorプロパティを使用してください。

固定ポップオーバー位置を指定するために使用される、追加のオプションownerDocumentプロパティを持つDOMRectを拡張するオブジェクトです。

• 必須: いいえ
  

anchorRef: Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range

注: このプロパティは非推奨です。代わりにanchorプロパティを使用してください。

固定ポップオーバー位置を指定するために使用されます。Element、elementへのReact参照、topおよびbottomプロパティを持つオブジェクト（両方とも要素を指す）、またはrangeであることができます。

• 必須: いいえ
  

animate: boolean

ポップオーバーが開くときにアニメーションするかどうか。

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

children: ReactNode

ポップオーバーのコンテンツとしてレンダリングされるchildren要素。

• 必須: はい
  

expandOnMobile: boolean

モバイルビューポートでポップオーバーを全画面表示します。

• 必須: いいえ
  

flip: boolean

通常の配置にスペースがない場合、ポップオーバーがその軸を越えて反転するかどうかを指定します。

「上」配置を使用している場合、ポップオーバーは「下」配置に切り替わります。「左」配置を使用している場合、ポップオーバーは「右」配置に切り替わります。

ポップオーバーは、反転時に「開始」または「終了」の整列を保持します。

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

focusOnMount: ‘firstElement’ | boolean

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

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

onFocusOutside: ( event: SyntheticEvent ) => void

開いているポップオーバーからフォーカスが離れたときに呼び出されるコールバックです。これは、ポップオーバーが特定の状況下で閉じるべき場合にのみ提供されるべきです（たとえば、新しいdocument.activeElementがポップオーバーのコンテンツであるか、ポップオーバーの可視性を制御している場合）。

提供されない場合、onCloseコールバックが代わりに呼び出されます。

• 必須: いいえ
  

getAnchorRect: ( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument

注: このプロパティは非推奨です。代わりにanchorプロパティを使用してください。

動的ポップオーバー位置を指定するために使用される、anchorRectプロパティが期待するのと同じ値を返す関数です。

• 必須: いいえ
  

headerTitle: string

ポップオーバーがモバイルビューポートで全画面表示に切り替えられたときに表示されるヘッダーテキストをカスタマイズするために使用されます（expandOnMobileプロパティを参照）。

• 必須: いいえ
  

isAlternate: boolean

注: このプロパティは非推奨です。'toolbar'値を持つvariantプロパティを使用してください。

ポップオーバーの異なる視覚スタイルを有効にするために使用されます。

• 必須: いいえ
  

noArrow: boolean

ポップオーバーのアンカーを指す矢印を表示/非表示にするために使用されます。

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

offset: number

アンカーとポップオーバーの間の距離（px単位）。

• 必須: いいえ
  

onClose: () => void

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

• 必須: いいえ
  

placement: ‘top’ | ‘top-start’ | ‘top-end’ | ‘right’ | ‘right-start’ | ‘right-end’ | ‘bottom’ | ‘bottom-start’ | ‘bottom-end’ | ‘left’ | ‘left-start’ | ‘left-end’ | ‘overlay’

ポップオーバーの位置をアンカーに対して指定するために使用されます。

他の配置関連のプロパティは期待通りに動作しない場合がありますのでご注意ください。  
- 必須: いいえ 
- デフォルト: `````"bottom-start"

position: [yAxis] [xAxis] [optionalCorner]

注: 可能な場合はplacementプロパティを使用してください。

アンカーに対するポップオーバーの位置を指定するためのレガシーな方法です。

可能な値:

• yAxis: 'top' | 'middle' | 'bottom'
• xAxis: 'left' | 'center' | 'right'
• corner: 'top' | 'right' | 'bottom' | 'left'
• 必須: いいえ
  

resize: boolean

ビューポートの端に達したときに、ポップオーバーの内容が表示されなくなるのを防ぐために、ポップオーバーのサイズを調整します。

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

variant: ‘toolbar’ | ‘unstyled’

ポップオーバーのスタイルを指定します。

デフォルトスタイルのために未定義のままにします。可能な値は:

– unstyled: ポップオーバーは本質的に目に見えるスタイルがなく、背景、境界線、アウトライン、またはドロップシャドウがなくても、ポップオーバーの内容は表示されます。

– toolbar: 他の要素との高いコントラストを持つスタイルで、エレベーションはありません。これは、Toolbarコンポーネントのスタイルに一致します。

– 必須: いいえ