Styliser les composants Web

Il y a quelques mois, nous avons annoncé la sortie d'un ensemble de composants Web conçus pour être utilisés avec le Client SDK de Vonage. Créez une conversation, passez-la aux composants, et c'est tout. Chaque composant prend en charge toutes ses responsabilités, comme l'écoute et l'envoi d'événements, ce qui permet au développeur de travailler sur d'autres aspects de son application. Honnêtement, je n'étais pas sûr que d'autres personnes trouveraient cela aussi utile que je le pensais, c'est pourquoi les éléments ont tous le style par défaut.

Je suis heureux de dire que j'avais tort. Il s'avère que les gens l'utilisent et que le principal retour d'information concerne le style ou l'absence de style. Dans cet article de blog, nous n'allons donc pas seulement voir comment styliser ceux du Client SDK, mais aussi les composants Web en général.

Le Shadow DOM, l'une des technologies qui rendent les composants Web possibles, peut protéger le style d'un composant Web contre les effets de l'application extérieure. Ce serait assez grave si l'application avait une balise section avec une balise position: absolute et qu'elle modifiait la balise section du composant Web.

Que se passe-t-il si vous souhaitez styliser les éléments d'un composant Web ? Ce serait bien que tous les boutons de votre application aient la même apparence, n'est-ce pas ?

Propriétés personnalisées CSS

En faisant des recherches sur les composants Web et en examinant divers systèmes de conception, j'ai vu des développeurs utiliser les propriétés personnalisées suivantes les propriétés personnalisées CSS, également connues sous le nom de variables CSS. L'auteur du composant Web créait des variables avec quelque chose comme --myelement-button-color et les déclarait comme suit :

button {
  background-color: var(--myelement-button-color, red);
}

Le rouge sera la couleur par défaut si la variable n'est pas définie.

Dans l'application environnante, vous pouvez attribuer une valeur qui correspond au reste de votre application comme ceci :

:root {
  --myelement-button-color: blue;
}

Génial ! Tous vos boutons peuvent avoir la même couleur, mais qu'en est-il de la couleur de la police du bouton ? Cela nécessiterait une autre variable CSS. Vous voulez faire correspondre le rayon de la bordure ? Une autre variable. La couleur de la bordure ? Oui, une autre variable.

Plus un composant Web est personnalisable, plus le nombre de variables peut rapidement augmenter. Il peut aussi être très limitatif car vous ne disposez que de ce qui est mis à votre disposition par l'auteur du composant Web.

Que pouvons-nous faire ?

L'incroyable ::part

C'est ici qu'intervient le ::part intervient. Il s'agit d'un pseudo-élément CSS, comme ::before et ::afterqui vous permet d'entrer dans le Shadow DOM pour styliser une partie étiquetée du composant Web. Il y a un bon article sur l'histoire de notre évolution par Monica Dinculescu.

A titre d'exemple, voici un bouton qui se trouve à l'intérieur du composant Web :

<button part="button">Click Me</button>

Dans l'application externe, vous pouvez styliser le bouton en le ciblant comme suit :

custom-element::part(button) {
  color: red;
  border: 2px green solid;
  font-size: 30px;
  background-color: yellow;
}

De cette manière, l'auteur du composant Web n'a qu'à étiqueter les différentes parties du composant et l'utilisateur peut le styliser comme il le souhaite.

Impressionnant, non ?

Et maintenant... Les composants Web de l'interface utilisateur du Client SDK

Avec l'introduction des propriétés CSS personnalisées et de ::part, examinons les composants Web de l'interface utilisateur du Client SDK et la manière de les styliser un par un.

Chaque composant dispose d'un embed pour montrer le style par défaut. Décommentez le CSS pour voir un exemple de la façon dont le style peut être personnalisé. N'hésitez pas à ajouter le vôtre et à l'essayer.

vc-typing-indicator

Commençons par le composant le plus simple, vc-typing-indicator. Il s'agit d'un simple texte, que vous pouvez donc styliser comme n'importe quel autre texte de votre application. Voici un exemple :

vc-text-input

La prochaine étape est vc-text-input. Ce composant comporte deux parties. L'entrée où le texte est saisi, étiquetée inputet le bouton permettant d'envoyer le message, appelé button.

vc-messages

Passons maintenant au composant chargé d'afficher les messages du chat, vc-messages. Au niveau extérieur, il y a le message dont la partie est libellée comme suit message. Le message est composé du texte du message étiqueté message-text et l'utilisateur qui a envoyé le message est étiqueté username.

Pour différencier les messages de l'utilisateur de l'application web des messages d'autres personnes, nous ajoutons mine à l'élément message, message-text, et username aux parties.

Remarque : l'exemple ne montre pas de différence entre le message de l'utilisateur et celui des autres utilisateurs. En effet, l'utilisateur est déterminé à partir de la conversation transmise au composant. Voici une capture d'écran du style par défaut :

Screenshot of the default syling of the vc-messages Web Component

vc-members

Le composant vc-members dresse la liste des membres du chat. Il s'agit d'une liste non ordonnée où la liste est étiquetée ul et les éléments ou membres sont étiquetés li. Pour pouvoir styliser les lignes alternées afin de rendre la liste plus facile à lire, nous utilisons les variables CSS --vc-members-nth-child-odd-color et --vc-members-nth-child-even-color pour ajouter de la couleur.

vc-keypad

Enfin, voici le composant qui contient le plus d'éléments, vc-keypad. En commençant par le haut, l'affichage des chiffres est étiqueté input. Les boutons sont regroupés en rangées et étiquetés row. Pour cibler une rangée particulière, elles sont étiquetées position1 à position5. Ainsi, par exemple, l'élément de style row position2 affectera les boutons 4, 5 et 6.

Chaque bouton est étiqueté button. Comme pour les lignes, pour cibler un bouton particulier, il faut ajouter sa position. Par exemple, le bouton "#" peut être stylé en ciblant la partie button position12.

Pour une explication beaucoup plus détaillée, y compris des diagrammes, veuillez jeter un coup d'œil sur le document Client SDK UI Web Components GitHub repo.

Conclusion

Nous avons vu comment styliser les composants Web et présenté à titre d'exemple ceux que nous avons construits pour fonctionner avec nos SDK clients.

Comment stylisez-vous vos composants Web ? Avez-vous utilisé nos composants d'interface utilisateur Client SDK ? Faites-le nous savoir dans notre canal Slack de la communauté!