Trame tutorial

Appearance

From the playground to trame ​

Don't forget to install the vuetify library for trame inside your virtual environemnt.

bash
uv pip install trame-vuetify

Option 1 (repo) ​

Run example ​

bash
python ./code/03-vuetify/01-static-card-edit.py

Option 2 (copy/paste) ​

Create file with content ​

Create a file 01-static-card-edit.py and paste the content below into it.

py
# uv pip install trame-vuetify

from trame.app import get_server
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import html, vuetify3 as v3

# Trame setup -----------------------------------------------------------------
server = get_server()

# ViewModel -------------------------------------------------------------------
state = server.state

state.cards = [
    {
        "title": "Bandwidth Used",
        "value": "1.01 TB",
        "change": "-20.12%",
        "color": "#da5656",
        "data": [5, 2, 5, 9, 5, 10, 3, 5, 3, 7, 1, 8, 2, 9, 6],
    },
    {
        "title": "Requests Served",
        "value": "7.96 M",
        "change": "-7.73%",
        "color": "#2fc584",
        "data": [1, 3, 8, 2, 9, 5, 10, 3, 5, 3, 7, 6, 8, 2, 9, 6],
    },
]

# View ------------------------------------------------------------------------
with VAppLayout(server):
    with v3.VContainer():
        with v3.VRow(dense=True):
            with v3.VCol(v_for="(card, i) in cards", key="i", cols=12, md=4):
                html.Pre("{{ JSON.stringify(card, null, 2) }}", classes="border-thin")
                # Use App.vue template content and convert it to Python


# Start Server ----------------------------------------------------------------
server.start()

Run example ​

bash
python 01-static-card-edit.py

Result ​

App

Hands on exercise ​

Edit the file using the code from the playground so it can look like that.

App