## Splitter Resizable split pane layout Category: Layout ### Usage `Splitter` component provides resizable split pane layout. ```python import dash_mantine_components as dmc component = dmc.Splitter( h=200, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "First pane", defaultSize=50, min=20, bg="blue", ), dmc.SplitterPane( "Second pane", defaultSize=50, min=20, bg="teal", ), ], ) ``` ### CSS units `SplitterPane` `defaultSize`, `min` and `max` props accept CSS units in addition to plain numbers: * A plain `number` or a `%` string (`'30%'`) is a flexible size – the pane shares the leftover space with other flexible panes. * A `px` or `rem` string (`'240px'`, `'15rem'`) is a fixed size – the pane keeps its pixel size when the container is resized and only changes when its own handle is dragged. `sizes` use the unit the pane was declared with: a `'240px'` pane stays `'240px'`, a flexible pane reports a percentage. When the container is smaller than the sum of the fixed panes, fixed panes shrink proportionally. ```python import dash_mantine_components as dmc component = dmc.Splitter( h=200, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "Fixed 240px sidebar", defaultSize="240px", min="160px", max="50%", bg="blue", ), dmc.SplitterPane( "Flexible content", defaultSize=100, bg="teal", ), ], ) ``` ### Vertical orientation Set `orientation="vertical"` to split panes vertically: ```python import dash_mantine_components as dmc component = dmc.Splitter( orientation="vertical", h=300, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "Top pane", defaultSize=60, min=20, bg="blue", ), dmc.SplitterPane( "Bottom pane", defaultSize=40, min=20, bg="teal", ), ], ) ``` ### Collapsible panes Set `collapsible` prop on `SplitterPane` to allow the pane to be collapsed by dragging past its minimum size. The `collapsed` prop is a list of indices of collapsed panes. Set this prop to collapse or expand collapsible panes, restoring their previous sizes. Updated when panes are collapsed or expanded. ```python import dash_mantine_components as dmc from dash import Input, Output, State, callback component = dmc.Box([ dmc.Splitter( id="splitter-collapse", h=200, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "Collapsible sidebar", collapsible=True, defaultSize=30, min=20, bg="blue", ), dmc.SplitterPane( "Main content", defaultSize=70, min=30, bg="teal", ), ], ), dmc.Button("Toggle Sidebar", id="splitter-collapse-toggle-button", mt="md") ]) @callback( Output("splitter-collapse", "collapsed"), Input("splitter-collapse-toggle-button", "n_clicks"), State("splitter-collapse", "collapsed"), prevent_initial_call=True, ) def toggle_sidebar(n_clicks, collapsed): return [0] if not collapsed or 0 not in collapsed else [] ``` ### Set pane sizes Use the `sizes` prop to set the size of each pane. You can update it in a callback to let users switch between predefined layouts or display the current pane sizes. When resizing by dragging, sizes updates when the user releases the handle. It updates immediately when resizing with the keyboard, collapsing or expanding a pane, or double-clicking a handle to reset the sizes. ```python from dash import Dash, Input, Output, callback, ctx import dash_mantine_components as dmc component = dmc.Box([ dmc.Splitter( h=200, mb="md", classNames={"pane": "splitter-examples"}, resetOnDoubleClick=True, id="splitter-sizes", children=[ dmc.SplitterPane( "Panel A (50%)", id="panel-a", defaultSize=50, min=20, bg="blue", ), dmc.SplitterPane( "Panel B (50%)", id="panel-b", defaultSize=50, min=20, bg="teal", ), ], ), dmc.Button("30/70", id="button-30-70", mr="sm"), dmc.Button("50/50", id="button-50-50", mr="sm"), dmc.Button("70/30", id="button-70-30"), ]) @callback( Output("splitter-sizes", "sizes"), Input("button-30-70", "n_clicks"), Input("button-50-50", "n_clicks"), Input("button-70-30", "n_clicks"), prevent_initial_call=True ) def handle_size_buttons_click(n_clicks_30_70, n_clicks_50_50, n_clicks_70_30): if ctx.triggered_id == "button-30-70": return [30, 70] elif ctx.triggered_id == "button-70-30": return [70, 30] else: return [50, 50] @callback( Output("panel-a", "children"), Output("panel-b", "children"), Input("splitter-sizes", "sizes"), prevent_initial_call=True ) def handle_size_change(sizes): sizes = sizes or [50, 50] return f"Panel A ({sizes[0]:.0f}%)", f"Panel B ({sizes[1]:.0f}%)" ``` ### Multiple panes `Splitter` supports any number of panes. Handles are automatically rendered between panes: ```python import dash_mantine_components as dmc component = dmc.Splitter( h=200, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "First", defaultSize=25, min=10, bg="blue", ), dmc.SplitterPane( "Second", defaultSize=50, min=10, bg="teal", ), dmc.SplitterPane( "Third", defaultSize=25, min=10, bg="grape", ), ], ) ``` ### Nested splitters You can nest `Splitter` components to create complex layouts: ```python import dash_mantine_components as dmc component = dmc.Splitter( h=350, children=[ dmc.SplitterPane( "Sidebar", defaultSize=30, min=15, bg="blue", classNames={"pane": "splitter-examples"}, ), dmc.SplitterPane( defaultSize=70, min=30, children=[ dmc.Splitter( orientation="vertical", h="100%", children=[ dmc.SplitterPane( "Editor", defaultSize=60, min=20, bg="teal", classNames={"pane": "splitter-examples"}, ), dmc.SplitterPane( "Terminal", defaultSize=40, min=20, bg="grape", classNames={"pane": "splitter-examples"}, ) ] ) ] ) ], ) ``` ### Redistribute When using multiple panes, set `redistribute` prop to control how space is borrowed from non-adjacent panels when the immediate neighbor is at its min/max: ```python import dash_mantine_components as dmc component = dmc.Splitter( redistribute="nearest", h=200, classNames={"pane": "splitter-examples"}, children=[ dmc.SplitterPane( "Panel A", defaultSize=25, min=10, bg="blue", ), dmc.SplitterPane( "Panel B", defaultSize=25, min=10, bg="teal", ), dmc.SplitterPane( "Panel C", defaultSize=25, min=10, bg="grape", ), dmc.SplitterPane( "Panel D", defaultSize=25, min=10, bg="orange", ), ], ) ``` ### Line Size, Line Color, Show Handle - Use the `lineSize` prop to control the thickness of the separator line between panes - Use `handleColor` to set the line color. The default is the body color, which may blend into panes without a background color. - Use `withHandle` prop to display or hide the handle ### Thumb styling - Use `thumbIcon` to use a different grip icon. - Use the styles API to change the background color of the thumb. By default, it's the body color. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify from docs.checkbox import iconcolor component = dmc.Splitter( h=200, classNames={"pane": "splitter-examples"}, handleIcon=DashIconify(icon="fa7-solid:grip-lines-vertical"), styles={ "handle": {"backgroundColor": "var(--mantine-color-red-filled)"}, "thumb": { "backgroundColor": "var(--mantine-color-green-filled)", "color": "var(--mantine-color-white)" }, }, bd="1px solid var(--mantine-color-default-border)", children=[ dmc.SplitterPane( "First pane", defaultSize=50, min=20, ), dmc.SplitterPane( "Second pane", defaultSize=50, min=20, ), ], ) ``` ### Don't Wrap SplitterPane `Splitter` component relies on `SplitterPane` order. Wrapping `SplitterPane` in another component is not supported, `SplitterPane` must be a direct child of `Splitter`. ```python dmc.Splitter( children=[ dmc.SplitterPane("First pane"), # will not work - do not wrap SplitterPane in another component dmc.Box(dmc.SplitterPane("Second pane")), ] ) ``` ### 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. #### Splitter Selectors | Selector | Static selector | Description | |----------|----------------|-------------| | root | .mantine-Splitter-root | Root element | | pane | .mantine-Splitter-pane | Pane element (`SplitterPane` component) | | handle | .mantine-Splitter-handle | Handle element between panes, contains the separator line and the thumb | | thumb | .mantine-Splitter-thumb | Thumb element inside the handle, contains the grip icon | #### Splitter CSS Variables | Selector | Variable | Description | |----------|----------|-------------| | root | --splitter-line-size | Controls the thickness of the separator line between panes | | root | --splitter-handle-color | Controls the color of the separator line between panes | ### Keyword Arguments #### Splitter - children (a list of or a singular dash component, string or number; optional): SplitterPane components must be direct children of Splitter. Put containers, content, or nested splitters inside a pane. SplitterPane defines the pane's size and behavior within Splitter. - 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. - 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. - collapsed (list of numbers; optional): Indices of collapsed panes. Set this prop to collapse or expand collapsible panes, restoring their previous sizes. Updated when panes are collapsed or expanded. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - handleColor (string; optional): Key of theme.colors or any valid CSS color for the separator line. - handleIcon (a list of or a singular dash component, string or number; optional): Custom icon displayed in the handle thumb. - 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`. - lineSize (string | number; optional): CSS value for separator line thickness between panes Default value: 2. - 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. - orientation (a value equal to: 'horizontal', 'vertical'; optional): Layout direction, 'horizontal' by default. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - redistribute (a value equal to: 'nearest', 'equal'; optional): How space is borrowed from non-adjacent panes at their size limits. - resetOnDoubleClick (boolean; optional): Restore adjacent panes to their default ratio when a handle is double-clicked. - shiftStep (number; optional): Keyboard step when Shift is held. A number or a CSS value with units, such as "50%", "200px", or "10rem". Default 10. - sizes (list of numbers; optional): Pane sizes. Updated on release after dragging and immediately for keyboard resizing, collapse/expand, and double-click reset. Each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed). - step (number; optional): Keyboard arrow step. Numbers and percentages are relative; px and rem are fixed. default 1. - 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`. - withHandle (boolean; optional): Determines whether the handle thumb is displayed, True by default. #### SplitterPane - children (a list of or a singular dash component, string or number; optional): Pane content. - 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. - 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. - collapseThreshold (number; optional): Size below which the pane snaps to collapsed, defaults to min. - collapsible (boolean; optional): Determines whether the pane can be collapsed, False 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. - defaultSize (number; required): Initial size. Numbers and percentage strings are flexible sizes; px and rem strings are fixed sizes. - 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: - max (number; optional): Maximum pane size, unlimited by default. - min (number; optional): Minimum pane size, 0 by default. - 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. - 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`.