如何使用 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
我错过了什么?有可能吗?
您的示例无效,因为 RangeSlider
的 v_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])
我正在使用 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
我错过了什么?有可能吗?
您的示例无效,因为 RangeSlider
的 v_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])