Menú desplegable de autocompletado Vuetify en estilo de fichas.

Quiero cambiar el estilo de los elementos en el menú desplegable de mi cuadro de autocompletar. Vuetify-Autocomplete

Actualmente muestra el estilo estándar para cada elemento:
Actual

<v-autocomplete
chips
deletable-chips
multiple
v-model=”selectedTags”
:items=”tags”

Pero quiero que muestre el estilo de chips de los elementos como este:
Chips-Style

Si es posible, incluso con colores específicos para cada etiqueta.
Actualmente los estoy mostrando en una tabla con el componente normal “v-chip” ¡que funciona muy bien!
Tabla con chips de colores

Intenté jugar un poco con CSS y con el componente V-autocomplete que resultó en errores cada vez.

Intenté encontrar algo como:

:menu-props=”{
nudgeBottom: 15 + ‘px’,
zIndex: 2,
allowOverflow,
rounded: ‘xl’ // <– Aquí✅
}”

mostrado en esta cuestión StackoverflowIssue.
Pero para los props/items dentro del menú en lugar del menú.

La otra solución sería hacer una versión DIY que no use el menú desplegable y simplemente verifique si la cadena está contenida en uno de los Chips de mi lista de Chips y los muestre debajo de la barra de búsqueda. Pero luego tendría que rechazar algunas características geniales del autocompletado.

No puedo agregar imágenes aún porque soy demasiado nuevo.
¡Lo siento por eso!

Espero haber incluido toda la información.

davy.ai

June 17, 2023 at 9:10 pm

Para cambiar el estilo de los elementos del menú desplegable de su caja de autocompletado Vuetify, puede usar la ranura item. Esto le permite personalizar la forma en que se muestra cada elemento.

Para lograr el estilo de Chips que desea, puede hacer algo como esto:

<v-autocomplete chips="" deletable-chips="" multiple="" v-model="selectedTags" :items="tags">
  <template #item="{ item }">
    <v-chip :color="getColorForTag(item)">
      {{ item }}
    </v-chip>
  </template>
</v-autocomplete>

Aquí, estamos utilizando la ranura item para renderizar cada elemento. Estamos renderizando un componente v-chip con un color específico para cada etiqueta. La función getColorForTag es un método que puede definir en su componente y que devuelve el color apropiado para cada etiqueta.

Puede definir el método getColorForTag así:

methods: {
  getColorForTag(tag) {
    // define un mapa de color para cada etiqueta
    const colorMap = {
      tag1: 'red',
      tag2: 'green',
      tag3: 'blue',
      // ...
    };

    // devuelve el color para la etiqueta dada
    return colorMap[tag];
  }
}

Este método asigna cada etiqueta a un color específico. Puede definir su propio mapa de colores dependiendo de sus requisitos.

Espero que esto le ayude a lograr el estilo que desea para su caja de autocompletado.

Answer

davy.ai

June 17, 2023 at 9:10 pm
Para cambiar el estilo de los elementos del menú desplegable de su caja de autocompletado Vuetify, puede usar la ranura item. Esto le permite personalizar la forma en que se muestra cada elemento.

Para lograr el estilo de Chips que desea, puede hacer algo como esto:
```
<v-autocomplete chips="" deletable-chips="" multiple="" v-model="selectedTags" :items="tags">
  <template #item="{ item }">
    <v-chip :color="getColorForTag(item)">
      {{ item }}
    </v-chip>
  </template>
</v-autocomplete>
```
Aquí, estamos utilizando la ranura item para renderizar cada elemento. Estamos renderizando un componente v-chip con un color específico para cada etiqueta. La función getColorForTag es un método que puede definir en su componente y que devuelve el color apropiado para cada etiqueta.

Puede definir el método getColorForTag así:
```
methods: {
  getColorForTag(tag) {
    // define un mapa de color para cada etiqueta
    const colorMap = {
      tag1: 'red',
      tag2: 'green',
      tag3: 'blue',
      // ...
    };

    // devuelve el color para la etiqueta dada
    return colorMap[tag];
  }
}
```
Este método asigna cada etiqueta a un color específico. Puede definir su propio mapa de colores dependiendo de sus requisitos.

Espero que esto le ayude a lograr el estilo que desea para su caja de autocompletado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Menú desplegable de autocompletado Vuetify en estilo de fichas.

Answer

davy.ai