## Overlay Overlays parent element with div element with any color and opacity Category: Feedback ### Usage `Overlay` takes 100% width and height of its parent container by default. When the `fixed=True` prop is set, it takes 100% width and height of the viewport instead. Set `color` and `backgroundOpacity` props to change `Overlay` background-color. Note that `backgroundOpacity` prop does not change CSS opacity property, it changes background-color. For example, if you set `color="#000"` and `backgroundOpacity={0.85}` background-color will be `rgba(0, 0, 0, 0.85)`: ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, callback, html component = dmc.Stack([ dmc.AspectRatio( ratio=16/9, maw=400, mx="auto", pos="relative", children=[ html.Img( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png", alt="Demo", ), dmc.Overlay( id="overlay-usage", color="#000", backgroundOpacity=0.85, style={"display": "block"} # Initially visible ) ] ), dmc.Button( "Toggle overlay", id="overlay-toggle-button", mx="auto", mt="lg", n_clicks=0 ) ]) @callback( Output("overlay-usage", "style"), Input("overlay-toggle-button", "n_clicks") ) def toggle_overlay(n_clicks): if n_clicks %2 == 0: return {"display": "block"} return {"display": "none"} ``` ### Gradient Set `gradient` prop to use `background-image` instead of `background-color`. When `gradient` prop is set, `color` and `backgroundOpacity` props are ignored. ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, callback, html component = dmc.Stack([ dmc.AspectRatio( ratio=16/9, maw=400, mx="auto", pos="relative", children=[ html.Img( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-7.png", alt="Demo", ), dmc.Overlay( id="overlay-gradient", gradient="linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%)", opacity=0.85, style={"display": "block"} # Initially visible ) ] ), dmc.Button( "Toggle overlay", id="overlay-toggle-button-gradient", mx="auto", mt="lg", n_clicks=0 ) ]) @callback( Output("overlay-gradient", "style"), Input("overlay-toggle-button-gradient", "n_clicks") ) def toggle_overlay(n_clicks): if n_clicks %2 == 0: return {"display": "block"} return {"display": "none"} ``` ### Blur Set `blur` prop to add `backdrop-filter: blur({value})` styles. Note that `backdrop-filter` is not supported in all browsers. ```python import dash_mantine_components as dmc from dash import Dash, Input, Output, callback, html component = dmc.Stack([ dmc.AspectRatio( ratio=16/9, maw=400, mx="auto", pos="relative", children=[ html.Img( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png", alt="Demo", ), dmc.Overlay( id="overlay-blur", color="#000", backgroundOpacity=0.35, blur=0 ) ] ), dmc.Text("Set Blur:"), dmc.Slider( id="overlay-blur-slider", min=0, max=15, value=5 ) ]) @callback( Output("overlay-blur", "blur"), Input("overlay-blur-slider", "value") ) def toggle_overlay(v): return v ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. Here’s your content formatted as Markdown tables: #### Overlay selectors | Selector | Static selector | Description | | -------- | --------------------- | ------------ | | root | `.mantine-Overlay-root` | Root element | --- #### Overlay CSS variables | Selector | Variable | Description | | -------- | ----------------- | ------------------------- | | root | `--overlay-bg` | Controls background-color | | root | `--overlay-filter` | Controls backdrop-filter | | root | `--overlay-radius` | Controls border-radius | | root | `--overlay-z-index` | Controls z-index | --- #### Overlay data attributes | Selector | Attribute | Condition | | -------- | ----------- | ------------------ | | root | `data-center` | center prop is set | | root | `data-fixed` | fixed prop is set | Do you want me to keep this as three separate tables (like above), or merge them into one big table with a "Type" column (`Selector / CSS variable / Data attribute`) for easier scanning? ### Keyword Arguments #### Overlay - children (a list of or a singular dash component, string or number; optional): Content inside overlay. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - backgroundOpacity (number; optional): Controls overlay `background-color` opacity 0–1, disregarded when `gradient` prop is set, `0.6` by default. - blur (string | number; optional): Overlay background blur, `0` by default. - center (boolean; optional): Determines whether content inside overlay should be vertically and horizontally centered, `False` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - color (optional): Overlay `background-color`, `#000` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - fixed (boolean; optional): Determines whether overlay should have fixed position instead of absolute, `False` by default. - gradient (string; optional): Changes overlay to gradient. If set, `color` prop is ignored. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, `0` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - zIndex (string | number; optional): Overlay z-index, `200` by default.