Search code examples
pythonvuetify.jsjupyter-labipywidgetsvoila

ipyvuetify buttons display side by side

I am pretty new (a few days) to ipyvuetify and I am building some buttons as such:

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

previously I created a button that would display a dialog floating with some information:

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

The above code is a simple button that when click opens a floating window.

Now I would like to show the four buttons one by each other:

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)

but the result is:

enter image description here

I would like to have the four buttons nicely aligne in one line.

I see that the help button is actually a v.Layout, whereas the other blue ones are buttons.

Please be aware that I am not a JS coder, but a python coder.

Some idea?

thanks.

Solution

  • Due to a current bug in which components in v_slots disappear after an action (#93 #88), the following won't work correctly. Posting it for future reference:

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

    A workaround for this problem is:

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