ipyvuetify按钮并排显示

编程问答 2022-06-09

问题描述

我（几天）刚接触ipyvuetify，并且正在构建一些这样的按钮：

v_btn_R1  = v.Btn(class_='mx-2 light-blue darken-1',children=['R1'])
v_btn_R2  = v.Btn(class_='mx-2 light-blue darken-1',children=['R2'])
v_btn_R3  = v.Btn(class_='mx-2 light-blue darken-1',children=['R3'])

以前，我创建了一个按钮，该按钮将显示一个包含一些信息的对话框：

btn_user_help = v.Layout(class_='mx-2',children=[
    v.Dialog(width='800',v_slots=[{'name': 'activator','variable': 'x','children': v.Btn(v_on='x.on',color='success',dark=True,children=['Help']),}],children=[v.Card(children=[v.CardTitle(class_='headline gray lighten-2',primary_title=True,children=["Help on the app"]),v.CardText(children=[help_text,bla])
                        )
        ])
    ])
])

上面的代码是一个简单的按钮，单击可打开浮动窗口。

现在我想将四个按钮彼此展示：

content1 = v.Container(children = [v_Buttons,Dialog])
content2 = v.Container(children = [v.Row(children=[v.Col(cols=12,children=[v_btn_R1,v_btn_R2,v_btn_help,Dialog])]) ])

display(content1)
display(content2)

但结果是：

enter image description here

我想使四个按钮很好地对齐成一行。

我看到帮助按钮实际上是v.Layout，而其他蓝色的是按钮。

请注意，我不是JS编码器，而是python编码器。

有什么主意吗？

谢谢。

解决方法

由于当前的错误，v_slots中的组件在操作后消失了（＃93＃88），因此以下操作无法正常进行。将其发布以供将来参考：

import ipyvuetify as v

v_btn_R1 = v.Btn(class_='mx-2 light-blue darken-1',children=['R1'])
v_btn_R2 = v.Btn(class_='mx-2 light-blue darken-1',children=['R2'])
v_btn_R3 = v.Btn(class_='mx-2 light-blue darken-1',children=['R3'])

# this is a  pop up dialog:
Dialog = v.Dialog(
    v_model=False,width='800px',v_slots=[{'name': 'activator','variable': 'x','children': v.Btn(v_on='x.on',class_='mx-2',color='success',dark=True,children=['Help']),}],children=[
        v.Card(children=[
            v.CardTitle(class_='headline gray lighten-2',primary_title=True,children=["Help on the app"]),v.CardText(children=['some help'])
        ])
    ])

v.Container(
    children=[v.Row(children=[v.Col(cols=12,children=[v_btn_R1,v_btn_R2,v_btn_R3,Dialog])])])

此问题的解决方法是：

import ipyvuetify as v

v_btn_R1 = v.Btn(class_='mx-2 light-blue darken-1',children=['R3'])

v_btn_help = v.Btn(class_='mx-2',children=['Help'])

# this is a  pop up dialog:
Dialog = v.Dialog(
    v_model=False,v.CardText(children=['some help'])
        ])
    ])


def toggle_dialog(*ignored):
    Dialog.v_model = not Dialog.v_model


v_btn_help.on_event('click',toggle_dialog)

content1 = v.Container(children=[Dialog])
content2 = v.Container(children=[
    v.Row(children=[v.Col(cols=12,v_btn_help])])])

v.Html(tag='div',children=[
    content1,content2
])
ipywidgetsjupyter-labpythonvoilavuetify.js