⚠️ beta

Adaptive Dialog

Adaptiveness

  • iOS: native styling
  • Stretches it's actions on the extra-small breakpoint (customizable using the AdaptiveDialogActions.stretchBreakpoint prop)
  • variant="tall" defaults to full screen mode on the extra-small breakpoint (customizable using the fullScreenBreakpoint prop)

Actions

Stretching

Actions have the same stretching as the Adaptive Button Stack using the AdaptiveDialogActions.stretchBreakpoint prop

Split Alignment

adaptiveDialogActionsClasses.alignStart can be used to align actions at both ends of the dialog when stacked horizontally

buttonDefaultProps

AdaptiveDialogActions.buttonDefaultProps can be used to set props on all the child buttons on all devices. To apply them to only specific devices you can use the useAdaptiveMode hook.

Background Limitations

The iOS dialog background uses backdrop-filter which has limitations based on it's parent elements. Typically most of these limitations will be avoided as long as disablePortal={true} isn't set.

API

MUI Dialog API with the following changes:

fullScreenBreakpoint

Breakpoint or screen width in px and below at which the dialog starts rendering full screen. This behavior can be disabled by setting the fullScreen or variant property or setting it to false

  • Type: "xs" | "sm" | "md" | "lg" | number | false
  • Default: xs

variant

Short dialogs ignore the fullScreenBreakpoint logic

  • Type: "short" | "tall"
  • Default: tall

AdaptiveDialogActions

MUI DialogActions API with the following changes:

buttonDefaultProps

Props passed to child AdaptiveButton components

  • Type: AdaptiveButtonProps
  • Default: adaptiveMode === "ios" ? { disableElevation: true, round: true, size: "large", variant: "contained" } : undefined

stretchBreakpoint

Breakpoint or screen width in px and below at which the children will be stretched. This behavior can be disabled by setting it to false

  • Type: "xs" | "sm" | "md" | "lg" | number | false
  • Default: xs

Browser Compatibility

Links

ON THIS PAGE