跳转到主要内容

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 | 讨论 | 问题 | 路线图 | 联系我们

https://zenodo.org/badge/410108340.svg

喜欢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-py3-none-any.whl (54.7 kB 查看哈希值)

上传时间 Python 3

支持者

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF 赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误记录 StatusPage StatusPage 状态页面