solara
solara copied to clipboard
access to underlying slots in ipyvuetify components
Is there a way to access the available slots in a Solara component for the underlying ipyvuetify component? For example, I'd like to use the selection
slot for the Vuetify multiple select component to customize the input display when there are many items . i.e. "a, b + 4 more" instead of "a, b, c, d, e, f". This may be related to https://github.com/widgetti/solara/issues/203.
I can do it if I define my own vue component but this seems less than ideal, and I lose the advantage of solara.
@solara.component_vue("sel.vue")
def TestSel(value=[], items=[], dense=False, label='Selections'):
pass
@solara.component
def Page():
vals = ['a','b','c','d']
val = solara.use_reactive([vals[0]])
with solara.Column():
TestSel(items=vals, value=val.value)
sel.vue
<template>
<v-select
v-model="value"
:items="items"
:label="label"
multiple
>
<template v-slot:selection="{ item, index }">
<v-chip v-if="index < 2">
<span>{{ item }}</span>
</v-chip>
<span
v-if="index === 2"
class="text-grey text-caption align-self-center"
>
(+{{ value.length - 2 }} others)
</span>
</template>
</v-select>
</template>
I can imagine expanding the kwargs to allow for slots to be passed directly to the ipyvuetify slots interface. Or building out a @solara.template
or @solara.slot
decorator to programmatically define slot content out of other solara components.