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

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

现在我想一个接一个地展示这四个按钮：

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)

但结果是：

​

​

我想把这四个按钮排成一行。

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

请注意，我不是一个JS程序员，而是一个python程序员。

有什么想法吗？

谢谢。

Answer 1

由于当前的一个bug，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
])