## Group Use Group component to place components in a horizontal flex container. Category: Layout ### Usage ### Align Since `Group` is a flexbox container, you can control `justify-content` and `align-items` properties by using `justify` and `align` props respectively. Note the minimum height set on component 2 and 3 in the example above. ```python style = { "border": f"1px solid var(--mantine-primary-color-filled)", "textAlign": "center", "margin": 2, "width": 100 } target = dmc.Grid( children=[ dmc.Box("1", style=style), dmc.Box("2", style={**style, "minHeight": 80}), dmc.Box("3", style={**style, "minHeight": 120}), ], ) ``` ### preventGrowOverflow `preventGrowOverflow` prop allows you to control how `Group` children should behave when there is not enough space to fit them all on one line. By default, children are not allowed to take more space than (1 / children.length) * 100% of parent width (`preventGrowOverflow` is set to True). To change this behavior, set `preventGrowOverflow` to False and children will be allowed to grow and take as much space as they need. ```python import dash_mantine_components as dmc component = dmc.Box( style={"overflow": "hidden"}, children=[ dmc.Box( maw=500, p="md", mx="auto", bg="var(--mantine-color-blue-light)", children=[ dmc.Text( size="sm", mb=5, children=( "preventGrowOverflow: true – each child width is always limited " "to 33% of parent width (since there are 3 children)" ), ), dmc.Group( grow=True, wrap="nowrap", children=[ dmc.Button("First button", variant="default"), dmc.Button("Second button with large content", variant="default"), dmc.Button("Third button", variant="default"), ], ), dmc.Text( size="sm", mb=5, mt="md", children=( "preventGrowOverflow: false – children will grow based on their " "content, they can take more than 33% of parent width" ), ), dmc.Group( grow=True, preventGrowOverflow=False, wrap="nowrap", children=[ dmc.Button("First button", variant="default"), dmc.Button("Second button with large content", variant="default"), dmc.Button("Third button", variant="default"), ], ), ], ) ], ) ``` ### Group children `Group` works correctly only with components. Strings, or numbers may have incorrect styles if `grow` prop is set: ```python # don't do this dmc.Group([ "Some text", dmc.Text("Some more text"), 20, ], grow=True) ``` ### Browser support `Group` uses flexbox `gap` to add spacing between children. In older browsers, `Group` children may not have spacing. ### 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. #### Group Selectors | Selector | Static selector | Description | |----------|-------------------------|----------------| | root | .mantine-Group-root | Root element | #### Group CSS Variables | Selector | Variable | Description | |----------|--------------------------|--------------------------------------------------------------| | root | --group-align | Controls `align-items` property | | | --group-justify | Controls `justify-content` property | | | --group-gap | Controls `gap` property | | | --group-wrap | Controls `flex-wrap` property | | | --group-child-width | Controls max-width of child elements when `grow` and `preventGrowOverflow` are set | #### Group Data Attributes | Selector | Attribute | Condition | |----------|-------------|-----------------| | root | data-grow | `grow` prop is set | ### Keyword Arguments #### Group - children (a list of or a singular dash component, string or number; optional) - id (string; optional): Unique ID to identify this component in Dash callbacks. - align (optional): Controls `align-items` CSS property, `'center'` by default. - 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. - 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. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - gap (string | number; optional): Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem, `'md'` by default. - grow (boolean; optional): Determines whether each child element should have `flex-grow: 1` style, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - justify (optional): Controls `justify-content` CSS property, `'flex-start'` by default. - 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. - preventGrowOverflow (boolean; optional): Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children), `True` 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`. - wrap (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'nowrap', 'wrap', 'wrap-reverse'; optional): Controls `flex-wrap` CSS property, `'wrap'` by default.