Cambiar apariencia de componentes (Combobox V10)

Other Languages Discusión en español (Discussion in Spanish)
1

Saludos a todos, he tratado de cambiar la apariencia de los componentes en vaadin 10 usando don-module en archivos html y he logrado algunos cambios para ciertos componentes pero para otros se ma ha hecho bastante dificil, para este caso he tomado un combobox y he tratado de retirar o cambiar el background de éste sin tener efecto, logro cambiar el backgroud del container del combobox pero no más allá.

Necesito de su gran ayuda.

Adjunto imágen donde se puede evidenciar desde el inspector del navegador el arbol del css el cual debería modificar, así mismo a la derecha de la imágen se pueden evidenciar los cambios que he tratado de realizar sin exito.
17353806.png

2

Hola,

Lo que requieres es modificar los estilos de elementos en el Shadow DOM. Esto es posible únicamente con propiedades personalizadas CSS (debido al funcionamiento actual de los navegadores web).

Analizando las [“partes”]
(https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement) del componente vaadin-combo-box, encontrarás que existe una para el campo de texto: text-field. Para este debes exponer una propiedad personalizada CSS. Ahora, esta “parte” es a su vez un componente vaadin-text-field, así que de forma similar, una de sus [partes]
(https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement) es input-field. Es allí donde debes configurar el color de fondo usando la propiedad personalizada CSS.

El siguiente es un ejemplo de como cambiar el fondo a red para un ComboBox con la classe CSS red-combo-box:

ComboBox<Object> comboBox = new ComboBox<>();
comboBox.addClassName("red-combo-box");

<dom-module id="custom-combo-box-styles" theme-for="vaadin-combo-box">
    <template>
        <style>
            :host(.red-combo-box) [part="text-field"]
 {
                --custom-text-field-background-color: red;
            }
        </style>
    </template>
</dom-module>

<dom-module id="custom-text-field-styles" theme-for="vaadin-text-field">
    <template>
        <style>
            [part="input-field"]
 {
                background-color: var(--custom-text-field-background-color, var(--lumo-contrast-10pct));
            }
        </style>
    </template>
</dom-module>
3

Gracias Alejandro por tu ayuda, el ejemplo ha funcionado sin ningún inconveniente; sin embargo me resulta curioso la forma de implementación de éste en el cual se mantiene un estrecha relación entre la variable declarada como:
–custom-text-field-background-color: red; y el uso de la función en
background-color: var(–custom-text-field-background-color, var(–lumo-contrast-10pct));

He realizado algunos cambios como por ejemplo no colocar en la función el valor var(–lumo-contrast-10pct) y he notado que afecta a todos los vaadin-text-field que tenga en el formulario.

Entiendo y he validado que el combobox tiene un componente vaadin-text-field pero como te indico es dificil entender como se excluyen estos del combobox afectado.

Gracias por la ayuda

4

Puedes usar cualquier nombre para la propiedad CSS, lo importante es usar val() para que tome el valor de la variable. Saludos.