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

​

​