animation
説明
The animation of the popover.
タイプ
"bottom" | "left" | "right" | "scale" | "top" | "none"デフォルト
'scale'Menu
Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。
Props
MenuProps
autoFocus
説明
If true, focus will be transferred to the first interactive element when the popover opens.
タイプ
booleanデフォルト
trueboundary
説明
The boundary area for the popper. Used within the preventOverflow modifier.
タイプ
HTMLElement | "clippingParents" | "scrollParent"デフォルト
'clippingParents'closeDelay
説明
The number of delay time to close.
タイプ
numberデフォルト
200closeOnBlur
説明
If true, the popover will close when you blur out it by clicking outside or tabbing out.
タイプ
booleanデフォルト
truecloseOnEsc
説明
If true, the popover will close when you hit the Esc key.
タイプ
booleanデフォルト
truecloseOnSelect
説明
If true, the list element will be closed when value is selected.
タイプ
booleanデフォルト
truedefaultIsOpen
説明
If true, the popover will be initially opened.
タイプ
booleanduration
説明
The animation duration.
タイプ
number | Partial<Record<"exit" | "enter", number>>eventListeners
説明
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
タイプ
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }デフォルト
trueflip
説明
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
タイプ
booleanデフォルト
truegutter
説明
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
タイプ
UIValue<number>デフォルト
8initialFocusRef
説明
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.
タイプ
booleanデフォルト
falseisOpen
説明
If true, the popover will be opened.
タイプ
booleanlazyBehavior
説明
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'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デフォルト
falsemodifiers
説明
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.
タイプ
() => voidonOpen
説明
Callback fired when the popover opens.
タイプ
() => voidopenDelay
説明
The number of delay time to open.
タイプ
numberデフォルト
200placement
説明
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デフォルト
truerestoreFocus
説明
If true, focus will be returned to the element that triggers the popover when it closes.
タイプ
booleanデフォルト
truestrategy
説明
The CSS positioning strategy to use.
タイプ
"fixed" | "absolute"デフォルト
'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" | "hover" | "never" | "contextmenu"デフォルト
'click'MenuButtonProps
MenuItemButtonProps
icon
タイプ
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortaliconProps
タイプ
MenuIconPropsinnerProps
タイプ
HTMLUIProps<"span">MenuListProps
contentProps
タイプ
MotionPropsWithoutChildrenMenuItemProps
closeOnSelect
説明
If true, the list element will be closed when selected.
タイプ
booleanデフォルト
falsecommand
説明
Right-aligned label text content, useful for displaying hotkeys.
タイプ
stringicon
説明
The menu item icon to use.
タイプ
ReactElement<any, string | JSXElementConstructor<any>>isDisabled
説明
If true, the menu item will be disabled.
タイプ
booleanデフォルト
falseisFocusable
説明
If true, the menu item will be focusable.
タイプ
booleanデフォルト
falseMenuOptionItemProps
closeOnSelect
説明
If true, the list element will be closed when selected.
タイプ
booleanデフォルト
falseicon
説明
The menu option item icon to use.
タイプ
ReactElement<any, string | JSXElementConstructor<any>>isChecked
説明
If true, the checkbox or radio will be checked.
タイプ
booleanデフォルト
falseisDisabled
説明
If true, the menu item will be disabled.
タイプ
booleanデフォルト
falseisFocusable
説明
If true, the menu item will be focusable.
タイプ
booleanデフォルト
falsetype
説明
The type of the menu option item.
タイプ
"checkbox" | "radio"MenuIconProps
MenuCommandProps
MenuGroupProps
label
説明
The label of the group.
タイプ
stringlabelProps
説明
Props for menu group element.
タイプ
HTMLUIProps<"span">MenuOptionGroupProps
defaultValue
説明
The initial value of the menu item group.
タイプ
Ylabel
説明
The label of the group.
タイプ
stringlabelProps
説明
Props for menu group element.
タイプ
HTMLUIProps<"span">onChange
説明
The callback fired when any children checkbox is checked or unchecked.
タイプ
(value: Y) => voidtype
説明
The type of the menu option group.
タイプ
"checkbox" | "radio"デフォルト
'checkbox'value
説明
The value of the menu item group.
タイプ
YMenuDividerProps
ContextMenuProps
animation
説明
The animation of the popover.
タイプ
"bottom" | "left" | "right" | "scale" | "top" | "none"デフォルト
'scale'autoFocus
説明
If true, focus will be transferred to the first interactive element when the popover opens.
タイプ
booleanデフォルト
trueboundary
説明
The boundary area for the popper. Used within the preventOverflow modifier.
タイプ
HTMLElement | "clippingParents" | "scrollParent"デフォルト
'clippingParents'closeDelay
説明
The number of delay time to close.
タイプ
numberデフォルト
200closeOnBlur
説明
If true, the popover will close when you blur out it by clicking outside or tabbing out.
タイプ
booleanデフォルト
truecloseOnEsc
説明
If true, the popover will close when you hit the Esc key.
タイプ
booleanデフォルト
truecloseOnSelect
説明
If true, the list element will be closed when value is selected.
タイプ
booleanデフォルト
truedefaultIsOpen
説明
If true, the popover will be initially opened.
タイプ
booleanduration
説明
The animation duration.
タイプ
number | Partial<Record<"exit" | "enter", number>>eventListeners
説明
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
タイプ
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }デフォルト
trueflip
説明
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
タイプ
booleanデフォルト
truegutter
説明
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
タイプ
UIValue<number>デフォルト
8initialFocusRef
説明
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.
タイプ
booleanデフォルト
falseisOpen
説明
If true, the popover will be opened.
タイプ
booleanlazyBehavior
説明
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'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デフォルト
falsemodifiers
説明
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.
タイプ
() => voidonOpen
説明
Callback fired when the popover opens.
タイプ
() => voidopenDelay
説明
The number of delay time to open.
タイプ
numberデフォルト
200placement
説明
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デフォルト
truerestoreFocus
説明
If true, focus will be returned to the element that triggers the popover when it closes.
タイプ
booleanデフォルト
truestrategy
説明
The CSS positioning strategy to use.
タイプ
"fixed" | "absolute"デフォルト
'absolute'ContextMenuTriggerProps
GitHubでこのページを編集する