python ipyvuetify如何将多个widget组合成一个class

Question

使用 ipyvuetify，我必须在 ExpansionPanel 中重复使用一对 Textfield 和 Textarea。它们的交互是相关联的，因为它们代表数据库行中的两个字段。

是否可以创建自定义小部件，它包含不同的嵌套 ipyvuetify 小部件，并允许作为单个对象与整个组进行交互，并且在调用时也像小部件一样呈现？

像这样：

import ipyvuetify as vue

Class customWidget():
    def __init__(self, titleText, bodyText):

        title = vue.TextField(class_='mb-n2', label='Label')
        title.value = titleText
        title.on_event('click.stop', None)
        openIn= vue.Btn(text=True, max_width='10px', children=[vue.Icon(children=['open_in_new'])])
        openIn.on_event('click.stop', None)


        note = vue.Textarea(class_='ma-0 pa-0 text-xs-caption', name='markerA', solo=True, elevation=0, outlined=True)
        note.value = bodyText

        panel = vue.ExpansionPanel(class_='ma-0 pa-0 text-xs-caption', children=[
            vue.ExpansionPanelHeader(class_='ma-0 pa-0 pl-5 pr-5', children=[title, openIn]),
            vue.ExpansionPanelContent(class_='ma-0 pa-0 text-xs-caption', children=[note]),
        ])

        self.expansionPanel = vue.ExpansionPanels(v_model=[0], multiple=True, focusable=False, children=[panel])

Answer 1

你不想加入类似这样的内容吗：

def display(self):
     display(self.expansionPanel)

那你可以去:

c1=customWidget('whatever tieltle','whatever bodytext')

c1.display()

Answer 2

到目前为止我找到的最简单的解决方案是使 customWidget class 继承自我想要显示的 ipyvuetify 小部件，并在构造函数中使用嵌套的其他小部件预填充它。

这非常有效，即使在深层嵌套结构中也可以设置为仍然可以访问每个元素。

注意不要覆盖 ipyvuetify 已经使用的属性名称。

在上述情况下，我的解决方案如下所示：


import ipyvuetify as vue

class customWidget(vue.ExpansionPanels):

    def __init__(self, titleText, bodyText, **kwargs):

        children = []

        title = vue.TextField(
            class_ = 'mb-n2',
            label = 'Label'
        )
        title.value = titleText
        title.on_event('click.stop', None)


        openIn = vue.Btn(
            text = True,
            max_width = '10px',
            children = [
                vue.Icon(
                    children = ['open_in_new']
                )
            ]
        )
        openIn.on_event('click.stop', None)


        note = vue.Textarea(
            class_ = 'ma-0 pa-0 text-xs-caption',
            name = 'markerA',
            solo = True,
            elevation = 0,
            outlined = True
        )
        note.value = bodyText

        panel = vue.ExpansionPanel(
            class_ = 'ma-0 pa-0 text-xs-caption',
            children = [
                vue.ExpansionPanelHeader(
                    class_ = 'ma-0 pa-0 pl-5 pr-5',
                    children = [
                        title,
                        openIn
                    ]
                ),
                vue.ExpansionPanelContent(
                    class_ = 'ma-0 pa-0 text-xs-caption',
                    children = [
                        note
                    ]
                ),
            ]
        )

        # add elements to kwargs, this allows to still pass others via the instance call
        kwargs['v_model'] = [0]
        kwargs['children'] = [panel]
        kwargs['multiple'] = True
        kwargs['focusable'] = False
        
        super().__init__(**kwargs)

python ipyvuetify如何将多个widget组合成一个class

python ipyvuetify how to combine multiple widgets into a class

python

widget

ipywidgets

ipyvuetify