A draggable and resizable grid layout with responsive breakpoints, for Dash
Project description
dash-snap-grid
A draggable and resizable grid layout with responsive breakpoints, for Dash.
(A dash port of react-grid-layout with some additional features specific to Dash)
Installation
pip install dash-snap-grid
Basic Usage
You must set the env variable REACT_VERSION=18.2.0
before starting up the app.
import dash
from dash import html
from dash_snap_grid import Grid
app = dash.Dash(__name__)
app.layout = html.Div(
[
Grid(
id="grid",
cols=12,
rowHeight=100,
layout=[
# i should match the id of the children
{"i": "1", "x": 0, "y": 0, "w": 1, "h": 2},
{"i": "2", "x": 1, "y": 0, "w": 3, "h": 2},
{"i": "3", "x": 4, "y": 0, "w": 1, "h": 2},
],
children=[
html.Div(
"1", id="1", style={"background": "lightblue", "height": "100%"}
),
html.Div(
"2", id="2", style={"background": "lightgreen", "height": "100%"}
),
html.Div(
"3", id="3", style={"background": "lightcoral", "height": "100%"}
),
],
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
Components
Grid
The main component that wraps the children and handles the layout.
Props
id
(str): The id of the component.width
(int): The initial width of the grid.autoSize
(bool): If true, the grid will automatically resize to fit the children. (default: True)cols
(int): The number of columns in the grid. (default: 12)draggableCancel
(str): A css selector for elements that should not trigger drag. Use this if you have input elements or buttons inside the grid.draggableHandle
(str): A css selector for elements that should be used as the drag handle.compactType
(str | None): The type of compacting to use when moving elements around. Options: None,vertical
,horizontal
. (default: None)layout
(List[Dict[str, Any]]): The initial layout of the grid. Each item should have the following keys:i
(str): The id of the child.x
(int): The x position of the child.y
(int): The y position of the child.w
(int): The width of the child. (count of columns)h
(int): The height of the child. (count of rows) The following keys are optional:minW
(int): The minimum width of the child. (default: 0)maxW
(int): The maximum width of the child. (default: Infinity)minH
(int): The minimum height of the child. (default: 0)maxH
(int): The maximum height of the child. (default: Infinity)static
(bool): If true, the child cannot be moved or resized. (default: False)isDraggable
(bool): If false, the child cannot be dragged. (default: True)isResizable
(bool): If false, the child cannot be resized. (default: True)isBounded
(bool): If true, the child will be bounded by the grid. (default: False)
margin
(List[int]): The margin between the children. (default: [10, 10])containerPadding
(List[int]): The padding of the container. (default: [10, 10])rowHeight
(int): The height of a row in pixels. (default: 150)isDraggable
(bool): If true, the children can be dragged. (default: True)isResizable
(bool): If true, the children can be resized. (default: True)isBounded
(bool): If true, the children will be bounded by the grid. (default: False)useCSSTransforms
(bool): If true, the children will be moved using css transforms. (default: True)transformScale
(float): The scale of the transform. (default: 1)allowOverlap
(bool): If true, the children can overlap. (default: False)preventCollision
(bool): If true, the children will not collide with each other. (default: False)isDroppable
(bool): If true, the children can be dropped. (default: False). Once an item is dropped, thedroppedItem
prop will be updated with the layout details of the dropped item, which contains the the layout details of the dropped item. thei
key will be set to the id of the dropped item.resizeHandles
(List[str]): The handles that can be used to resize the children. Options:['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw']
. (default: ['se'])children
(List[html.Div]): The children of the grid. Make sure the id of the children matches thei
key of the layout items.
ResponsiveGrid
A responsive version of the grid that changes the layout based on the screen size.
Props
id
(str): The id of the component.width
(int): The initial width of the grid.autoSize
(bool): If true, the grid will automatically resize to fit the children. (default: True)breakpoints
(Dict[str, int]): The breakpoints for the grid. The keys should be the screen sizes and the values should be the number of columns in the grid for that screen size. default:{'lg': 1200, 'md': 996, 'sm': 768, 'xs': 400, 'xxs': 0}
cols
(dict[str, int]): Number of columns per screen size. The keys should be the screen sizes and the values should be the number of columns in the grid for that screen size. default:{'lg': 12, 'md': 10, 'sm': 6, 'xs': 4, 'xxs': 2}
draggableCancel
(str): A css selector for elements that should not trigger drag. Use this if you have input elements or buttons inside the grid.draggableHandle
(str): A css selector for elements that should be used as the drag handle.compactType
(str | None): The type of compacting to use when moving elements around. Options: None,vertical
,horizontal
. (default: None)layout
(List[Dict[str, Any]]): The current layout (Read only) Each item should have the following keys:i
(str): The id of the child.x
(int): The x position of the child.y
(int): The y position of the child.w
(int): The width of the child. (count of columns)h
(int): The height of the child. (count of rows) The following keys are optional:minW
(int): The minimum width of the child. (default: 0)maxW
(int): The maximum width of the child. (default: Infinity)minH
(int): The minimum height of the child. (default: 0)maxH
(int): The maximum height of the child. (default: Infinity)static
(bool): If true, the child cannot be moved or resized. (default: False)isDraggable
(bool): If false, the child cannot be dragged. (default: True)isResizable
(bool): If false, the child cannot be resized. (default: True)isBounded
(bool): If true, the child will be bounded by the grid. (default: False)
layouts
(Dict[str, List[Dict[str, Any]]]): The initial layout of the grid for each screen size. This is dictionary of layouts, where the keys are the screen sizes and the values are the layouts. If you want to set the layout for a given screen size, this prop should be set.layout
prop is only to read the current layout. for example:{'lg': [...], 'md': [...], 'sm': [...], 'xs': [...], 'xxs': [...]}
.margin
(List[int] | dict[str, int]): The margin between the children. (default: [10, 10]) You can also specify the margin for each screen size by passing a dictionary. for example:{'lg': [10, 10], 'md': [5, 5], 'sm': [2, 2], 'xs': [1, 1], 'xxs': [0, 0]}
containerPadding
(List[int] | dict[str, int]): The padding of the container. (default: [10, 10]) Similar to the margin, you can also specify the padding for each screen size by passing a dictionary.rowHeight
(int): The height of a row in pixels. (default: 150)isDraggable
(bool): If true, the children can be dragged. (default: True)isResizable
(bool): If true, the children can be resized. (default: True)isBounded
(bool): If true, the children will be bounded by the grid. (default: False)useCSSTransforms
(bool): If true, the children will be moved using css transforms. (default: True)transformScale
(float): The scale of the transform. (default: 1)allowOverlap
(bool): If true, the children can overlap. (default: False)preventCollision
(bool): If true, the children will not collide with each other. (default: False)isDroppable
(bool): If true, the children can be dropped. (default: False). Once an item is dropped, thedroppedItem
prop will be updated with the layout details of the dropped item, which contains the the layout details of the dropped item. thei
key will be set to the id of the dropped item.resizeHandles
(List[str]): The handles that can be used to resize the children. Options:['s', 'e', 'n', 'w', 'se', 'ne', 'sw', 'nw']
. (default: ['se'])children
(List[html.Div]): The children of the grid. Make sure the id of the children matches thei
key of the layout items.
DraggableDiv
A draggable div that can be used as a an item that can be dragged and dropped in the grid.
Props
id
(str): The id of the component.children
(html.Div): The children of the div.style
(dict): The style of the div.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file dash_snap_grid-0.1.0.tar.gz
.
File metadata
- Download URL: dash_snap_grid-0.1.0.tar.gz
- Upload date:
- Size: 142.8 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.1.1 CPython/3.12.6
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 11c586fc5b96631f4bc3d6b85df2a650934fdc4b96ab235a0779c1304c684384 |
|
MD5 | a0b83c84e0d568d85d380797c05d674a |
|
BLAKE2b-256 | 8b177e035aca65c11595440d4eb3eb2869e7b1c31e14965e30ecc1f2f3f0c546 |
File details
Details for the file dash_snap_grid-0.1.0-py3-none-any.whl
.
File metadata
- Download URL: dash_snap_grid-0.1.0-py3-none-any.whl
- Upload date:
- Size: 145.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/5.1.1 CPython/3.12.6
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | c0ae198c12217d3712cfe10d3489cb587e37456a6486af15b6e9613180f3cf05 |
|
MD5 | 7944ba3a4e675c26c28c10da0c3d5923 |
|
BLAKE2b-256 | 2f319c515108d50128f6ee3927e1708da1e5ced8200f8044dcc500473a776d2a |