Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

access to underlying slots in ipyvuetify components #485

Open
havok2063 opened this issue Jan 25, 2024 · 0 comments
Open

access to underlying slots in ipyvuetify components #485

havok2063 opened this issue Jan 25, 2024 · 0 comments

Comments

@havok2063
Copy link
Collaborator

havok2063 commented Jan 25, 2024

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 #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant