1

使用 ipyvuetify，我Textfield必须Textarea在ExpansionPanel. 它们的交互是链接的，因为它们代表 DB 行中的两个字段。

是否可以创建一个自定义小部件，它包含不同的嵌套 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])
4

2 回答 2

1

到目前为止，我发现的最简单的解决方案是让 customWidget 类继承自我想要显示的 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)
于 2021-03-18T10:15:11.777 回答
0

您不想包括以下内容：

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

然后你可以去：

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

c1.display()
于 2021-03-15T12:20:42.943 回答