如何使用 ipyvuetify 的 Slider 对象中的插槽?

how to use the slots in Slider object of ipyvuetify?

我正在使用 ipyvuetify 库创建仪表板应用程序。我想添加一个额外的 TextField 作为我的 Slider 组件的插槽。我按照 vuetify documentation and the slot documentation from ipyvuetify 中给出的示例进行操作,但我无法使简单的“+”图标出现。

range = v.RangeSlider(
    v_model = None,
    v_slots = [{
        'name': 'append',
        'children': [v.Icon(children=['mdi-plus'])]
    }]
)
range

我错过了什么?有可能吗?

您的示例无效,因为 RangeSliderv_model 是一个列表。

range_ = v.RangeSlider(
    v_model = [1,2],
    min=1,
    max=10,
    v_slots = [{
        'name': 'append',
        'children': [v.Icon(children=['mdi-plus'])]
    }]
)
range_

但是,正如 ipyvuetify 中记录的 v_slot 错误一样,一旦您与滑块交互,插槽就会消失。

解决方法是使用 append_icon 参数创建一个自定义范围滑块(如果您正在寻找一个图标作为插槽)。


class RangeSlider(v.RangeSlider):
    
    def __init__(self, *args, **kwargs):
        self.append_icon='mdi-plus'
        
        super().__init__(*args,**kwargs)
        
        self.on_event('click:append', self.add)
    
    def add(self, *args):
        self.v_model = [self.v_model[0]] + [self.v_model[1]+1]
        
rs=RangeSlider(min=1, max=10, v_model = [1,2])
rs

但如果您打算包含 TextField,我会创建一个自定义 Flex 元素,并链接两个小部件。

正如@dguerrero 提到的那样,插槽很棘手并且没有得到完全支持。对于文本字段,是否可以改用 jsdlink?

import ipyvuetify as v
import ipywidgets as widgets

rangeSlider = v.RangeSlider(class_='pa-2',
        thumb_label = True, 
        style_="max-width:500px",
        height = 90,
        v_model=[0,10.0],
        min=0,
        max=10.0,
        step=0.01,
        label='min/max:',
        vertical = False,
)

textField = v.TextField(class_='pa-2',
    style_="max-width:100px",
    v_model=rangeSlider.v_model,
    placeholder='',
    label='',
    disabled=False
)

widgets.jsdlink((rangeSlider,'v_model'),(textField,'v_model'))

v.Row(children=[rangeSlider,textField])