I'm truing to make a simple GUI with Trame. And finally managed to make 'File' menu items.
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify
import asyncio
server = get_server(client_type="vue2")
state, ctrl = server.state, server.controller
state.file_menu_items = [
{'type': 'header', 'title': 'Light Guide',},
{'type': 'item', 'title': 'Load', 'value': 'lg_load',},
{'type': 'divider'},
{'type': 'header', 'title': 'Project'},
{'type': 'item', 'title': 'Load', 'value': 'pj_load',},
{'type': 'item', 'title': 'Save', 'value': 'pj_save',},
{'type': 'divider'},
{'type': 'item', 'title': 'Exit', 'value': 'exit',},
]
def file_menu_item_click(value):
if value == 'lg_load':
print("Light Guide Load")
elif value == 'pj_load':
print("Project Load")
elif value == 'pj_save':
print("Project Save")
elif value == 'exit':
print("Exit")
asyncio.create_task(server.stop())
ctrl.file_menu_item_click = file_menu_item_click
with SinglePageLayout(server) as layout:
layout.title.set_text("Ray Tracer GUI")
with layout.toolbar:
vuetify.VSpacer()
with vuetify.VMenu():
with vuetify.Template(v_slot_activator="{ on, attrs }"):
with vuetify.VBtn("File", dark=True, color="primary", v_bind="attrs", v_on="on"):
vuetify.VIcon("mdi-menu-down")
with vuetify.VList():
for item in state.file_menu_items:
item_type = item.get('type')
if item_type == 'header':
vuetify.VSubheader(item['title'])
elif item_type == 'divider':
vuetify.VDivider()
elif item_type == 'item':
vuetify.VListItem(
item['title'],
click=(file_menu_item_click, f"[\'{item['value']}\',]",),
)
if __name__ == "__main__":
server.start()
But I want the active element to be not grey as it is but for instance blue. How can I do it? color property doesn't change anything. Also may be somebody can explain me what does
vuetify.Template(v_slot_activator="{ on, attrs }")
mean?
And finally may be you can recommend some text except docs where the logic of Trame and its interaction with Vuetify would be expained?