python：如何将项目添加到 ipyvuetify 工具栏的菜单中

Question

我想找出将项目添加到使用 ipyvuetify 创建的工具栏菜单的方法

# stack overflow
toolbar = vue.Toolbar(rounded=True,
                      color='#6BB6BC',
                      app=True, 
                      children=[vue.AppBarNavIcon(children=[]),
                                vue.ToolbarTitle(children=['ipyvuetify toolbar']),
                                vue.Spacer(),
                                vue.Btn(class_='mx-1', children=[vue.Icon(children=['mdi-email'])])
                               ]
                     )

display(toolbar)

items = [vue.ListItem(children=[
    vue.ListItemTitle(children=[
        f'Item {i}'])])
         for i in range(1, 5)]

menu = vue.Menu(offset_y=True,
    children=[vue.Btn(children=['MENU']),
        vue.List(children=items)
    ]
)
display(menu)

以上代码显示工具栏如下：

但我不知道如何向菜单添加内容，例如按钮 and/or 输入字段。

有人知道如何编写菜单代码并将其添加到横向工具栏菜单符号吗？

谢谢

Answer 1

您可以将 'on_event' 操作分配给按钮。这是一个例子。

import ipyvuetify as vue

app = vue.App(v_model=None)

toolBarButton = vue.Btn(
                  icon = True, 
                  children=[
                      vue.Icon(children=['mdi-dots-vertical'])
                      ])

appBar = vue.AppBar(
                  color='#6BB6BC',
                  dense=False,
                  dark = False   ,  
                  children=[toolBarButton,
                            vue.ToolbarTitle(children=['ipyvuetify toolbar']),
                            vue.Spacer(),
                            vue.Btn(class_='mx-1', children=[vue.Icon(children=['mdi-email'])])
                           ])

navDrawer = vue.NavigationDrawer(v_model=True, children=[
                         vue.Select(label='select1', items=[1,2,], prepend_icon = 'fa-truck'), 
                        vue.TextField(label='text', prepend_icon = 'mdi-heart'), 
                        vue.Select(label='select3', prepend_icon = 'mdi-magnify')
                    ])

navDrawer.mini_variant = True
navDrawer.expand_on_hover = True

navDrawer.width =300
navDrawer.mini_variant_width = 30

def on_click(widget, event, data):
    navDrawer.v_model = not navDrawer.v_model
    if navDrawer.v_model:
        navDrawer.mini_variant_width = 30
    else:
        navDrawer.mini_variant_width = 0
        
toolBarButton.on_event('click', on_click)

randomButton = vue.Btn(
                  icon = False, 
                  children=[
                  vue.Icon(children=['mdi-heart']),
                  'Random Button...',
                      ])

content = vue.Col(children = [
    randomButton, 
    vue.TextField(label='text', 
                  prepend_icon = 'mdi-heart'), ])

drawersWithContent = vue.Container(
        class_="fill-height",
#         fluid=False,
        children = [vue.Row(
                      align="top",
                      justify="left",
                      children = [navDrawer,content]
                            )
                ]
            )

app.children = [appBar, drawersWithContent]

app

python：如何将项目添加到 ipyvuetify 工具栏的菜单中

python: how to add items to a menu of an ipyvuetify toolbar

python

menu

toolbar

ipyvuetify