ipywidgets

ipywidgets copied to clipboard

Problem

Buttons are not highly customizable as far as I'm aware and this seems to significantly limit the GUI design options with Ipywidgets. For example, I tried to create one with the Box element, but found it has no on_click method.

My use-case:

    class StatusButton():
        def __init__(self, logo_path: str, title: str, vertical=False, img_width=30, offset=0, link=False):
            self.state_condition = False
            if vertical:
                margin = "0px 0px 3px 0px"
            else:
                margin = "0px 3px 0px 0px"
            tip = widgets.Box([
                            render_img('./images/open.png', width=15, height=15).add_class('non_interactive')
                        ], layout=widgets.Layout(
                            width='40px',
                            height='40px',
                            justify_content='center',
                            align_items='center'
                        )).add_class('black_bg').add_class('anchor_end').add_class('clickable')
            if link:
                def open_page(b):
                    print('Opening link:', link)
                    webbrowser.open(link)
                tip.on_click(open_page) # This will trigger an error
                                        # since Box has no on_click
            elem = widgets.Box([
                        render_img(logo_path, width=img_width),
                        widgets.HTML(f"<div style='padding-left: 10px; font-size: 13px; font-weight: bold;'>{title}</div>"),
                        tip
                    ], layout=widgets.Layout(
                        display='flex',
                        flex_flow='row',
                        align_items='center',
                        justify_content='center',
                        border='solid 1px #a5a5a5',
                        overflow='hidden',
                        margin=margin,
                        padding='10px 10px 10px 10px',
                        width='225px',
                        height='40px',
                    ))
            self.elem = elem

Proposed Solution

I propose that all elements should have the on_click method. Unless this is a feature already and I just can't find it.