Trame包装器用于vue-grid-layout
项目描述
trame-grid-layout通过组件扩展trame 小部件,可以用来创建一些动态网格布局容器。它利用[vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout),这是一个类似于[Gridster](http://dsmorse.github.io/gridster.js/)的网格布局系统,用于Vue.js。它深受[React-Grid-Layout](https://github.com/react-grid-layout/react-grid-layout)的启发。
安装
可以使用pip安装trame-grid-layout
pip install --upgrade trame-grid-layout
用法
前往Trame教程学习如何使用库并开始构建您自己的应用程序。
API参考文档提供了API级别的文档。
许可证
trame-grid-layout基于MIT许可证发布。更多详细信息,请参阅许可证。选择此许可证是为了与vue-grid-layout使用的许可证相匹配,该许可证可以通过此库公开。
社区
喜欢trame吗?
开发:推送至PyPI前获取客户端
要更新客户端代码,请在更新目标版本时运行以下命令行
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
简单示例
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()
项目详情
下载文件
下载适用于您的平台的文件。如果您不确定选择哪个,请了解有关安装包的更多信息。
源代码分发
trame-grid-layout-1.0.3.tar.gz (55.0 kB 查看哈希值)
构建分发
关闭
trame-grid-layout-1.0.3.tar.gz的哈希值
算法 | 哈希摘要 | |
---|---|---|
SHA256 | f6a75be573c0c23cf449a52ff8e0ea59f2444bb3b73ef0c1a2021c1336f358c6 |
|
MD5 | f1b2e0742aadc9df5b0387b9d5f87b5c |
|
BLAKE2b-256 | 77dda9d2529c2528f2edd1c2a04da56988c2a67a328de6b0d0653be9a60fad53 |
关闭
trame_grid_layout-1.0.3-py3-none-any.whl的哈希值
算法 | 哈希摘要 | |
---|---|---|
SHA256 | d5e965f3f15cfc9cba089b11d07794b8f69f8375236f1c93ac4a499fabfae159 |
|
MD5 | 0a6354f0cfecfb42b2c08e00030ae0f5 |
|
BLAKE2b-256 | 7388348088380db7f17f755ba02ff5ce0d0035d97eb13a34978b92c3d4f64019 |