python - 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)

上面的代码显示工具栏如下：

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

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

谢谢

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