Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Popover

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

ソース@yamada-ui/popover

Props

ComboBoxProps

animation

説明

The animation of the popover.

タイプ

"bottom" | "left" | "none" | "right" | "scale" | "top"

デフォルト

'scale'

boundary

説明

The boundary area for the popper. Used within the preventOverflow modifier.

タイプ

"clippingParents" | "scrollParent" | HTMLElement

デフォルト

'clippingParents'

closeDelay

説明

The number of delay time to close.

タイプ

number

デフォルト

200

closeOnBlur

説明

If true, the popover will close when you blur out it by clicking outside or tabbing out.

タイプ

boolean

デフォルト

true

closeOnEsc

説明

If true, the popover will close when you hit the Esc key.

タイプ

boolean

デフォルト

true

defaultIsOpen

非推奨

説明

If true, the popover will be initially opened.

非推奨

Use defaultOpen instead

タイプ

boolean

defaultOpen

説明

If true, the popover will be initially opened.

タイプ

boolean

duration

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

eventListeners

説明

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

タイプ

type ONLY_FOR_FORMAT = | boolean | { resize?: boolean | undefined; scroll?: boolean | undefined }

デフォルト

true

flip

説明

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

タイプ

boolean

デフォルト

true

gutter

説明

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

タイプ

UIValue<number>

デフォルト

8

isLazy

非推奨

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

非推奨

Use lazy instead

タイプ

boolean

デフォルト

false

isOpen

非推奨

説明

If true, the popover will be opened.

非推奨

Use open instead

タイプ

boolean

lazy

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

タイプ

boolean

デフォルト

false

lazyBehavior

説明

The lazy behavior of popover's content when not visible. Only works when lazy={true} - unmount: The popover's content is always unmounted when not open. - keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.

タイプ

LazyMode

デフォルト

'unmount'

matchWidth

説明

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

タイプ

boolean

デフォルト

false

modifiers

説明

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

タイプ

Partial<Modifier<string, any>>[]

ドキュメント

https://popper.js.org/docs/v2/modifiers/

offset

説明

The main and cross-axis offset to displace popper element from its reference element.

タイプ

[number, number]

onClose

説明

Callback fired when the popover closes.

タイプ

() => void

onOpen

説明

Callback fired when the popover opens.

タイプ

() => void

open

説明

If true, the popover will be opened.

タイプ

boolean

openDelay

説明

The number of delay time to open.

タイプ

number

デフォルト

200

placement

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

preventOverflow

説明

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

タイプ

boolean

デフォルト

true

strategy

説明

The CSS positioning strategy to use.

タイプ

"absolute" | "fixed"

デフォルト

'absolute'

PopoverProps

animation

説明

The animation of the popover.

タイプ

"bottom" | "left" | "none" | "right" | "scale" | "top"

デフォルト

'scale'

autoFocus

説明

If true, focus will be transferred to the first interactive element when the popover opens.

タイプ

boolean

デフォルト

true

boundary

説明

The boundary area for the popper. Used within the preventOverflow modifier.

タイプ

"clippingParents" | "scrollParent" | HTMLElement

デフォルト

'clippingParents'

closeDelay

説明

The number of delay time to close.

タイプ

number

デフォルト

200

closeOnBlur

説明

If true, the popover will close when you blur out it by clicking outside or tabbing out.

タイプ

boolean

デフォルト

true

closeOnButton

説明

If true, display the popover close button.

タイプ

boolean

デフォルト

true

closeOnEsc

説明

If true, the popover will close when you hit the Esc key.

タイプ

boolean

デフォルト

true

defaultIsOpen

非推奨

説明

If true, the popover will be initially opened.

非推奨

Use defaultOpen instead

タイプ

boolean

defaultOpen

説明

If true, the popover will be initially opened.

タイプ

boolean

duration

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

eventListeners

説明

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

タイプ

type ONLY_FOR_FORMAT = | boolean | { resize?: boolean | undefined; scroll?: boolean | undefined }

デフォルト

true

flip

説明

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

タイプ

boolean

デフォルト

true

gutter

説明

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

タイプ

UIValue<number>

デフォルト

8

initialFocusRef

説明

The ref of the element that should receive focus when the popover opens.

タイプ

RefObject<{ focus(): void }>

isLazy

非推奨

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

非推奨

Use lazy instead

タイプ

boolean

デフォルト

false

isOpen

非推奨

説明

If true, the popover will be opened.

非推奨

Use open instead

タイプ

boolean

lazy

説明

If true, the PopoverContent rendering will be deferred until the popover is open.

タイプ

boolean

デフォルト

false

lazyBehavior

説明

The lazy behavior of popover's content when not visible. Only works when lazy={true} - unmount: The popover's content is always unmounted when not open. - keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.

タイプ

LazyMode

デフォルト

'unmount'

matchWidth

説明

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

タイプ

boolean

デフォルト

false

modifiers

説明

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

タイプ

Partial<Modifier<string, any>>[]

ドキュメント

https://popper.js.org/docs/v2/modifiers/

offset

説明

The main and cross-axis offset to displace popper element from its reference element.

タイプ

[number, number]

onClose

説明

Callback fired when the popover closes.

タイプ

() => void

onOpen

説明

Callback fired when the popover opens.

タイプ

() => void

open

説明

If true, the popover will be opened.

タイプ

boolean

openDelay

説明

The number of delay time to open.

タイプ

number

デフォルト

200

placement

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

preventOverflow

説明

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

タイプ

boolean

デフォルト

true

relatedRef

説明

The ref of the element related to the popover. This is used during the onBlur event.

タイプ

RefObject<HTMLElement>

restoreFocus

説明

If true, focus will be returned to the element that triggers the popover when it closes.

タイプ

boolean

デフォルト

true

strategy

説明

The CSS positioning strategy to use.

タイプ

"absolute" | "fixed"

デフォルト

'absolute'

trigger

説明

The interaction that triggers the popover. - hover: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger. - click: means the popover will open on click or press Enter to Space on keyboard.

タイプ

"click" | "contextmenu" | "hover" | "never"

デフォルト

'click'

PopoverBodyProps

PopoverCloseButtonProps

disableRipple

説明

If true, disable ripple effects when pressing a element.

タイプ

boolean

デフォルト

false

isDisabled

非推奨

説明

If true, the button is disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

isRounded

説明

If true, the button is full rounded.

タイプ

boolean

デフォルト

false

PopoverContentProps

as

説明

The HTML element to render.

タイプ

keyof ReactDOM

containerProps

説明

The props of the container element.

タイプ

Omit<HTMLUIProps, "children">

PopoverFooterProps

PopoverHeaderProps

GitHubでこのページを編集する

ActionBarTooltip