){kind=small}
Estilización de componentes web
Tiempo de lectura: 9 minutos
Hace unos meses, anunciamos el lanzamiento de un conjunto de componentes web creados para usarse con Vonage Client SDK. Crea una conversación, pásala a los componentes y listo. Cada componente manejará todas sus responsabilidades, como escuchar y enviar eventos, dejando que el desarrollador trabaje en otros aspectos de su aplicación. Honestamente, no estaba seguro de si otros lo encontrarían tan valioso como yo pensaba que podría ser, por lo que todos los elementos tienen el estilo por defecto.
Me alegra decir que estaba equivocado. Resulta que la gente lo está usando y los principales comentarios fueron sobre el estilo o la falta del mismo. Así que en esta entrada del blog, no sólo vamos a ir sobre cómo el estilo de los que para el Client SDK, pero Web Components en general.
El Shadow DOM, una de las tecnologías que hacen posibles los Web Components, puede proteger el estilo de un Web Component para que no se vea afectado por la aplicación externa. Sería bastante malo si la aplicación tuviera una etiqueta section con position: absolute y que modificara la etiqueta section del Web Component.
¿Y si quieres dar estilo a los elementos de un Web Component? Estaría bien que todos los botones de su aplicación tuvieran el mismo aspecto, ¿verdad?
Mientras investigaba sobre Web Components y observaba diversos sistemas de diseño, vi que los desarrolladores utilizaban propiedades personalizadas CSS, también conocidas como variables CSS. El autor del Web Component creaba variables con algo como --myelement-button-color y las declararía como
button {
background-color: var(--myelement-button-color, red);
}El rojo será el color por defecto si no se establece la variable.
En la aplicación circundante, puede asignar un valor que coincida con el resto de su aplicación de la siguiente manera:
:root {
--myelement-button-color: blue;
}¡Genial! Todos tus botones pueden tener el mismo color, pero ¿qué pasa con el color de la fuente del botón? Eso requeriría otra variable CSS. ¿Quieres igualar el radio del borde? Otra variable. ¿El color del borde? Sí, otra variable.
El número de variables puede aumentar rápidamente cuanto más personalizable sea un Web Component. También puede ser muy limitante porque sólo tienes lo que el autor del Web Component pone a tu disposición.
¿Qué podemos hacer?
Aquí es donde ::part entra en juego. Es un pseudo-elemento CSS, como ::before y ::afterque te permite entrar en el Shadow DOM para dar estilo a una parte etiquetada del Web Component. Hay un buen artículo sobre la historia de cómo llegamos aquí por Monica Dinculescu.
Como ejemplo, aquí hay un botón que está dentro del Componente Web:
<button part="button">Click Me</button>En la aplicación externa, puedes dar estilo al botón apuntando hacia dentro de esta manera:
custom-element::part(button) {
color: red;
border: 2px green solid;
font-size: 30px;
background-color: yellow;
}De este modo, el autor del Web Component sólo tiene que etiquetar las distintas partes del componente y el usuario puede darle el estilo que desee.
Impresionante, ¿verdad?
Una vez introducidas las propiedades personalizadas CSS y ::part, echemos un vistazo a los componentes web de interfaz de usuario de Client SDK y a cómo aplicarles estilo de uno en uno.
Cada componente tiene un embed para mostrar el estilo por defecto. Descomenta el CSS para ver un ejemplo de cómo se puede personalizar el estilo. Siéntase libre de añadir el suyo propio y probarlo.
Empecemos por el componente más sencillo, vc-typing-indicator. Es sólo texto, así que puedes darle el estilo que le darías a cualquier otro texto en tu aplicación. He aquí un ejemplo:
A continuación vc-text-input. Este componente consta de dos partes. La entrada donde se introduce el texto, denominada inputy el botón para enviar el mensaje, denominado button.
Ahora el componente responsable de mostrar los mensajes del chat, vc-messages. En el nivel exterior, está el mensaje donde su parte se etiqueta como message. El mensaje está compuesto por el texto del mensaje etiquetado como message-text y el usuario que envió el mensaje está etiquetado como username.
Para diferenciar entre los mensajes del usuario de la aplicación web y los mensajes de los demás, añadimos mine a las etiquetas message, message-texty username .
Nota: El ejemplo no muestra una diferencia en el mensaje del usuario con respecto a otros usuarios. Esto se debe a que el usuario se determina a partir de la Conversación pasada al componente. Aquí hay una captura de pantalla de cómo se ve el estilo por defecto:
Screenshot of the default syling of the vc-messages Web Component
El componente vc-members enumera los miembros del chat. Es una lista desordenada en la que la lista está etiquetada como ul y los elementos o miembros se etiquetan como li. Para poder dar estilo a las filas alternas para que la lista sea más fácil de leer, utilizamos las variables CSS --vc-members-nth-child-odd-color y --vc-members-nth-child-even-color para añadir algo de color.
Por último, aquí está el componente con más elementos, vc-keypad. Empezando por arriba, la pantalla de dígitos está etiquetada como input. Los botones están agrupados en filas y etiquetados como row. Para dirigirse a una fila concreta, están etiquetados como position1 a position5. Así, por ejemplo, estilizar la parte row position2 afectaría a los botones 4, 5 y 6.
Cada botón está etiquetado como button. Al igual que con las filas, para apuntar a un botón en particular, se añade en su posición. Por ejemplo, el botón "#" puede estilizarse apuntando a la parte button position12.
Para una explicación mucho más detallada, incluyendo diagramas, por favor eche un vistazo a la Client SDK UI Web Components GitHub repo.
Hemos repasado cómo dar estilo a los Web Components y hemos presentado los que construimos para trabajar con nuestros SDKs de Cliente como ejemplos.
¿Cómo da estilo a sus Web Components? ¿Ha utilizado nuestros Client SDK UI Components? Háganoslo saber en nuestro Canal Slack de la Comunidad¡!