Grid Layout widgets for trame
==================================
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).
Installing
-----------------------------------------------------------
trame-grid-layout can be installed with `pip <https://pypi.org/project/trame-grid-layout/>`_:
.. code-block:: bash
pip install --upgrade trame-grid-layout
Usage
-----------------------------------------------------------
The `Trame Tutorial <https://kitware.github.io/trame/docs/tutorial.html>`_ is the place to go to learn how to use the library and start building your own application.
The `API Reference <https://trame.readthedocs.io/en/latest/index.html>`_ documentation provides API-level documentation.
License
-----------------------------------------------------------
trame-grid-layout is made available under the MIT License License. For more details, see `LICENSE <https://github.com/Kitware/trame-grid-layout/blob/master/LICENSE>`_
This license has been chosen to match the one use by `vue-grid-layout <https://github.com/react-grid-layout/react-grid-layout/blob/master/LICENSE>`_ which can be exposed via this library.
Community
-----------------------------------------------------------
`Trame <https://kitware.github.io/trame/>`_ | `Discussions <https://github.com/Kitware/trame/discussions>`_ | `Issues <https://github.com/Kitware/trame/issues>`_ | `RoadMap <https://github.com/Kitware/trame/projects/1>`_ | `Contact Us <https://www.kitware.com/contact-us/>`_
.. image:: https://zenodo.org/badge/410108340.svg
:target: https://zenodo.org/badge/latestdoi/410108340
Enjoying trame?
-----------------------------------------------------------
Share your experience `with a testimonial <https://github.com/Kitware/trame/issues/18>`_ or `with a brand approval <https://github.com/Kitware/trame/issues/19>`_.
Development: Grabbing client before push to PyPI
-----------------------------------------------------------
To update the client code, run the following command line while updating the targeted version
.. code-block:: console
mkdir -p ./trame_grid_layout/module/serve
curl https://unpkg.com/vue-grid-layout@2.4.0 -Lo ./trame_grid_layout/module/serve/vue-grid-layout.js
Simple example
-----------------------------------------------------------
.. code-block:: python
from 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()
Raw data
{
"_id": null,
"home_page": "",
"name": "trame-grid-layout",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "Python,Interactive,Web,Application,Framework",
"author": "Kitware Inc.",
"author_email": "",
"download_url": "https://files.pythonhosted.org/packages/77/dd/a9d2529c2528f2edd1c2a04da56988c2a67a328de6b0d0653be9a60fad53/trame-grid-layout-1.0.3.tar.gz",
"platform": null,
"description": "Grid Layout widgets for trame\n==================================\n\ntrame-grid-layout extend trame **widgets** with components that can be used to create some dynamic grid layout containers.\nIt leverage [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout) which is a grid layout system, like \n[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).\n\n\nInstalling\n-----------------------------------------------------------\n\ntrame-grid-layout can be installed with `pip <https://pypi.org/project/trame-grid-layout/>`_:\n\n.. code-block:: bash\n\n pip install --upgrade trame-grid-layout\n\n\nUsage\n-----------------------------------------------------------\n\nThe `Trame Tutorial <https://kitware.github.io/trame/docs/tutorial.html>`_ is the place to go to learn how to use the library and start building your own application.\n\nThe `API Reference <https://trame.readthedocs.io/en/latest/index.html>`_ documentation provides API-level documentation.\n\n\nLicense\n-----------------------------------------------------------\n\ntrame-grid-layout is made available under the MIT License License. For more details, see `LICENSE <https://github.com/Kitware/trame-grid-layout/blob/master/LICENSE>`_\nThis license has been chosen to match the one use by `vue-grid-layout <https://github.com/react-grid-layout/react-grid-layout/blob/master/LICENSE>`_ which can be exposed via this library.\n\n\nCommunity\n-----------------------------------------------------------\n\n`Trame <https://kitware.github.io/trame/>`_ | `Discussions <https://github.com/Kitware/trame/discussions>`_ | `Issues <https://github.com/Kitware/trame/issues>`_ | `RoadMap <https://github.com/Kitware/trame/projects/1>`_ | `Contact Us <https://www.kitware.com/contact-us/>`_\n\n.. image:: https://zenodo.org/badge/410108340.svg\n :target: https://zenodo.org/badge/latestdoi/410108340\n\n\nEnjoying trame?\n-----------------------------------------------------------\n\nShare your experience `with a testimonial <https://github.com/Kitware/trame/issues/18>`_ or `with a brand approval <https://github.com/Kitware/trame/issues/19>`_.\n\n\nDevelopment: Grabbing client before push to PyPI\n-----------------------------------------------------------\n\nTo update the client code, run the following command line while updating the targeted version\n\n.. code-block:: console\n\n mkdir -p ./trame_grid_layout/module/serve\n curl https://unpkg.com/vue-grid-layout@2.4.0 -Lo ./trame_grid_layout/module/serve/vue-grid-layout.js\n\nSimple example\n-----------------------------------------------------------\n\n.. code-block:: python\n\n from trame.app import get_server\n from trame.ui.vuetify import SinglePageLayout\n from trame.widgets import vuetify, grid\n\n server = get_server()\n state = server.state\n\n LAYOUT = [\n {\"x\": 0, \"y\": 0, \"w\": 2, \"h\": 2, \"i\": \"0\"},\n {\"x\": 2, \"y\": 0, \"w\": 2, \"h\": 4, \"i\": \"1\"},\n {\"x\": 4, \"y\": 0, \"w\": 2, \"h\": 5, \"i\": \"2\"},\n {\"x\": 6, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"3\"},\n {\"x\": 8, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"4\"},\n {\"x\": 10, \"y\": 0, \"w\": 2, \"h\": 3, \"i\": \"5\"},\n {\"x\": 0, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"6\"},\n {\"x\": 2, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"7\"},\n {\"x\": 4, \"y\": 5, \"w\": 2, \"h\": 5, \"i\": \"8\"},\n {\"x\": 6, \"y\": 3, \"w\": 2, \"h\": 4, \"i\": \"9\"},\n {\"x\": 8, \"y\": 4, \"w\": 2, \"h\": 4, \"i\": \"10\"},\n {\"x\": 10, \"y\": 4, \"w\": 2, \"h\": 4, \"i\": \"11\"},\n {\"x\": 0, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"12\"},\n {\"x\": 2, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"13\"},\n {\"x\": 4, \"y\": 8, \"w\": 2, \"h\": 4, \"i\": \"14\"},\n {\"x\": 6, \"y\": 8, \"w\": 2, \"h\": 4, \"i\": \"15\"},\n {\"x\": 8, \"y\": 10, \"w\": 2, \"h\": 5, \"i\": \"16\"},\n {\"x\": 10, \"y\": 4, \"w\": 2, \"h\": 2, \"i\": \"17\"},\n {\"x\": 0, \"y\": 9, \"w\": 2, \"h\": 3, \"i\": \"18\"},\n {\"x\": 2, \"y\": 6, \"w\": 2, \"h\": 2, \"i\": \"19\"},\n ]\n\n with SinglePageLayout(server) as layout:\n layout.title.set_text(\"Grid layout\")\n with layout.content:\n with grid.GridLayout(\n layout=(\"layout\", LAYOUT),\n row_height=20,\n ):\n grid.GridItem(\n \"{{ item.i }}\",\n v_for=\"item in layout\",\n key=\"item.i\",\n v_bind=\"item\",\n classes=\"pa-4\",\n style=\"border: solid 1px #333; background: rgba(128, 128, 128, 0.5);\",\n )\n\n if __name__ == \"__main__\":\n server.start()\n",
"bugtrack_url": null,
"license": "MIT License",
"summary": "Trame wrapper to vue-grid-layout",
"version": "1.0.3",
"split_keywords": [
"python",
"interactive",
"web",
"application",
"framework"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "7388348088380db7f17f755ba02ff5ce0d0035d97eb13a34978b92c3d4f64019",
"md5": "0a6354f0cfecfb42b2c08e00030ae0f5",
"sha256": "d5e965f3f15cfc9cba089b11d07794b8f69f8375236f1c93ac4a499fabfae159"
},
"downloads": -1,
"filename": "trame_grid_layout-1.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "0a6354f0cfecfb42b2c08e00030ae0f5",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 54747,
"upload_time": "2023-04-25T16:35:05",
"upload_time_iso_8601": "2023-04-25T16:35:05.599311Z",
"url": "https://files.pythonhosted.org/packages/73/88/348088380db7f17f755ba02ff5ce0d0035d97eb13a34978b92c3d4f64019/trame_grid_layout-1.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "77dda9d2529c2528f2edd1c2a04da56988c2a67a328de6b0d0653be9a60fad53",
"md5": "f1b2e0742aadc9df5b0387b9d5f87b5c",
"sha256": "f6a75be573c0c23cf449a52ff8e0ea59f2444bb3b73ef0c1a2021c1336f358c6"
},
"downloads": -1,
"filename": "trame-grid-layout-1.0.3.tar.gz",
"has_sig": false,
"md5_digest": "f1b2e0742aadc9df5b0387b9d5f87b5c",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 54982,
"upload_time": "2023-04-25T16:35:07",
"upload_time_iso_8601": "2023-04-25T16:35:07.384878Z",
"url": "https://files.pythonhosted.org/packages/77/dd/a9d2529c2528f2edd1c2a04da56988c2a67a328de6b0d0653be9a60fad53/trame-grid-layout-1.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-04-25 16:35:07",
"github": false,
"gitlab": false,
"bitbucket": false,
"lcname": "trame-grid-layout"
}
JSON