Popover

説明

The animation of the popover.

タイプ

デフォルト

'scale'

説明

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

タイプ

"clippingParents" | "scrollParent" | HTMLElement

デフォルト

'clippingParents'

説明

The number of delay time to close.

タイプ

number

デフォルト

200

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

true

説明

If true, the popover will be initially opened.

タイプ

boolean

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

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

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

UIValue<number>

デフォルト

8

説明

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

タイプ

boolean

デフォルト

false

説明

If true, the popover will be opened.

タイプ

boolean

説明

The lazy behavior of popover's content when not visible. Only works when isLazy={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'

説明

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

説明

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/

説明

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

タイプ

[number, number]

説明

Callback fired when the popover closes.

タイプ

() => void

説明

Callback fired when the popover opens.

タイプ

() => void

説明

The number of delay time to open.

タイプ

number

デフォルト

200

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

説明

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

タイプ

boolean

デフォルト

true

説明

The CSS positioning strategy to use.

タイプ

"absolute" | "fixed"

デフォルト

'absolute'

説明

The animation of the popover.

タイプ

デフォルト

'scale'

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

"clippingParents" | "scrollParent" | HTMLElement

デフォルト

'clippingParents'

説明

The number of delay time to close.

タイプ

number

デフォルト

200

説明

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

タイプ

boolean

デフォルト

true

説明

If true, display the popover close button.

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

デフォルト

true

説明

If true, the popover will be initially opened.

タイプ

boolean

説明

The animation duration.

タイプ

number | MotionLifecycleProps<number>

説明

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

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

UIValue<number>

デフォルト

8

説明

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

タイプ

RefObject<{ focus(): void }>

説明

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

タイプ

boolean

デフォルト

false

説明

If true, the popover will be opened.

タイプ

boolean

説明

The lazy behavior of popover's content when not visible. Only works when isLazy={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'

説明

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

説明

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/

説明

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

タイプ

[number, number]

説明

Callback fired when the popover closes.

タイプ

() => void

説明

Callback fired when the popover opens.

タイプ

() => void

説明

The number of delay time to open.

タイプ

number

デフォルト

200

説明

The placement of the popper relative to its reference.

タイプ

UIValue<Placement>

デフォルト

'bottom'

説明

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

タイプ

boolean

デフォルト

true

説明

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

タイプ

RefObject<HTMLElement>

説明

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

タイプ

boolean

デフォルト

true

説明

The CSS positioning strategy to use.

タイプ

"absolute" | "fixed"

デフォルト

'absolute'

説明

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'

説明

If true, disable ripple effects when pressing a element.

タイプ

boolean

デフォルト

false

説明

If true, the button is disabled.

タイプ

boolean

デフォルト

false

説明

If true, the button is full rounded.

タイプ

boolean

デフォルト

false

説明

The HTML element to render.

タイプ

"symbol" | "object" | "clipPath" | "filter" | "g" | "marker" | "mask" | "p" | "text" | "div" | "style" | "title" | "button" | "form" | "animate" | "a" | "abbr" | "address" | "area" | ... 149 more ... | "textPath"

説明

The props of the container element.

タイプ

Omit<HTMLUIProps, "children">

ComboBoxProps

PopoverProps

PopoverBodyProps

PopoverCloseButtonProps

PopoverContentProps

PopoverFooterProps

PopoverHeaderProps