1

我对 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)

但结果是：

在此处输入图像描述

我想让四个按钮在一行中很好地对齐。

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

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

有什么想法？

谢谢。

4

1 回答 1

2

由于当前的错误，其中组件在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
])
于 2020-10-13T08:18:20.170 回答