Flyout

使用法

import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';
function Example() {
   return (
   <Flyout trigger={ <Button>Show/Hide content</Button> }>
   <Text>Code is Poetry</Text>
   </Flyout>
   );
}

プロパティ

state: PopoverStateReturn

• 必須: いいえ
  

label: string

• 必須: いいえ
  

animated: boolean

Flyout にアニメーションがあるかどうかを決定します。

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

animationDuration: boolean

Flyout のアニメーションの持続時間。

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

baseId: string

すべてのアイテムIDのベースとして機能するID。詳細については https://reakit.io/docs/popover/#usepopoverstate を参照してください。

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

elevation: number

エレベーションの影のサイズ。詳細については Card を確認してください。

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

maxWidth: CSSProperties[ ‘maxWidth’ ]

Flyout 要素の最大幅。

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

onVisibleChange: ( …args: any ) => void

visible の状態が変わるときのコールバック。

• 必須: いいえ
  

trigger: FunctionComponentElement< any >

クリックされたときに Flyout の visible 状態をトリガーする要素。

<Flyout trigger={<Button>Greet</Button>}>
   <Text>Hi! I'm Olaf!</Text>
</Flyout>

• 必須: はい
  

visible: boolean

Flyout が表示されているかどうか。詳細については Reakit ドキュメント を参照してください。

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

placement: PopperPlacement

ポップオーバー要素の位置。詳細については popper ドキュメント を参照してください。

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