trame-grid-layout extend trame widgets with components that can be used to create some dynamic grid layout containers. It leverage [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) which is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. Heavily inspired by [React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout).
trame-grid-layout can be installed with pip:
pip install --upgrade trame-grid-layoutThe Trame Tutorial is the place to go to learn how to use the library and start building your own application.
The API Reference documentation provides API-level documentation.
trame-grid-layout is made available under the MIT License License. For more details, see LICENSE This license has been chosen to match the one use by vue-grid-layout which can be exposed via this library.
Trame | Discussions | Issues | RoadMap | Contact Us
Share your experience with a testimonial or with a brand approval.
To update the client code, run the following command line while updating the targeted version
mkdir -p ./trame_grid_layout/module/serve
curl https://unpkg.com/[email protected] -Lo ./trame_grid_layout/module/serve/vue-grid-layout.jsfrom trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify, grid
server = get_server()
state = server.state
LAYOUT = [
{"x": 0, "y": 0, "w": 2, "h": 2, "i": "0"},
{"x": 2, "y": 0, "w": 2, "h": 4, "i": "1"},
{"x": 4, "y": 0, "w": 2, "h": 5, "i": "2"},
{"x": 6, "y": 0, "w": 2, "h": 3, "i": "3"},
{"x": 8, "y": 0, "w": 2, "h": 3, "i": "4"},
{"x": 10, "y": 0, "w": 2, "h": 3, "i": "5"},
{"x": 0, "y": 5, "w": 2, "h": 5, "i": "6"},
{"x": 2, "y": 5, "w": 2, "h": 5, "i": "7"},
{"x": 4, "y": 5, "w": 2, "h": 5, "i": "8"},
{"x": 6, "y": 3, "w": 2, "h": 4, "i": "9"},
{"x": 8, "y": 4, "w": 2, "h": 4, "i": "10"},
{"x": 10, "y": 4, "w": 2, "h": 4, "i": "11"},
{"x": 0, "y": 10, "w": 2, "h": 5, "i": "12"},
{"x": 2, "y": 10, "w": 2, "h": 5, "i": "13"},
{"x": 4, "y": 8, "w": 2, "h": 4, "i": "14"},
{"x": 6, "y": 8, "w": 2, "h": 4, "i": "15"},
{"x": 8, "y": 10, "w": 2, "h": 5, "i": "16"},
{"x": 10, "y": 4, "w": 2, "h": 2, "i": "17"},
{"x": 0, "y": 9, "w": 2, "h": 3, "i": "18"},
{"x": 2, "y": 6, "w": 2, "h": 2, "i": "19"},
]
with SinglePageLayout(server) as layout:
layout.title.set_text("Grid layout")
with layout.content:
with grid.GridLayout(
layout=("layout", LAYOUT),
row_height=20,
):
grid.GridItem(
"{{ item.i }}",
v_for="item in layout",
key="item.i",
v_bind="item",
classes="pa-4",
style="border: solid 1px #333; background: rgba(128, 128, 128, 0.5);",
)
if __name__ == "__main__":
server.start()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent