ipyvuetify 按钮并排显示

Question

我是 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])
                        )
        ])
    ])
])

上面的代码是一个简单的按钮，当点击时会打开一个浮动的 window。

现在我想一个一个显示四个按钮：

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)

但结果是：

我想让四个按钮很好地排成一行。

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

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

有什么想法吗？

谢谢。

Answer 1

由于 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=['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'])

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

# this is a  pop up dialog:
Dialog = v.Dialog(
    v_model=False,
    width='800px',
    children=[
        v.Card(children=[
            v.CardTitle(class_='headline gray lighten-2', primary_title=True,
                        children=["Help on the app"]),
            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, children=[v_btn_R1, v_btn_R2, v_btn_R3, v_btn_help])])])

v.Html(tag='div', children=[
    content1,
    content2
])

ipyvuetify 按钮并排显示

ipyvuetify buttons display side by side

python

ipywidgets

vuetify.js

jupyter-lab

voila