@activelylearn/material-ui

Version:

Material-UI's workspace package

63 lines (48 loc) • 5.83 kB

Markdown

--- filename: /packages/material-ui/src/Snackbar/Snackbar.js ---  # Snackbar ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | node | | The action to display. | | anchorOrigin | {horizontal?: union: number |  enum: 'left' |  'center' |  'right' , vertical?: union: number |  enum: 'top' |  'center' |  'bottom' } | { vertical: 'bottom', horizontal: 'center',} | The anchor of the `Snackbar`. | | autoHideDuration | number | | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element | | If you wish the take control over the children of the component you can use this property. When used, you replace the `SnackbarContent` component with the children. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | ContentProps | object | | Properties applied to the `SnackbarContent` element. | | disableWindowBlurListener | bool | false | If `true`, the `autoHideDuration` timer will expire even if the window is not focused. | | key | any | | When displaying multiple consecutive Snackbars from a parent rendering a single <Snackbar/>, add the key property to ensure independent treatment of each message. e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and features such as autoHideDuration may be canceled. | | message | node | | The message to display. | | onClose | func | | Callback fired when the component requests to be closed. Typically `onClose` is used to set state in the parent component, which is used to control the `Snackbar` `open` prop. The `reason` parameter can optionally be used to control the response to `onClose`, for example ignoring `clickaway`. **Signature:** `function(event: object, reason: string) => void` *event:* The event source of the callback *reason:* Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` | | onEnter | func | | Callback fired before the transition is entering. | | onEntered | func | | Callback fired when the transition has entered. | | onEntering | func | | Callback fired when the transition is entering. | | onExit | func | | Callback fired before the transition is exiting. | | onExited | func | | Callback fired when the transition has exited. | | onExiting | func | | Callback fired when the transition is exiting. | | open | bool | | If true, `Snackbar` is open. | | resumeHideDuration | number | | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | union: string |  func | Slide | Transition component. | | transitionDuration | union: number |  {enter?: number, exit?: number} | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | | TransitionProps | object | | Properties applied to the `Transition` element. | Any other properties supplied will be spread to the root element (native element). ## CSS API You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - `root` - `anchorOriginTopCenter` - `anchorOriginBottomCenter` - `anchorOriginTopRight` - `anchorOriginBottomRight` - `anchorOriginTopLeft` - `anchorOriginBottomLeft` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Snackbar/Snackbar.js) for more detail. If using the `overrides` key of the theme as documented [here](/customization/themes#customizing-all-instances-of-a-component-type), you need to use the following style sheet name: `MuiSnackbar`. ## Demos - [Snackbars](/demos/snackbars)