){kind=small}
Estilo dos componentes da Web
Tempo de leitura: 9 minutos
Há alguns meses, anunciamos o lançamento de um conjunto de Web Components desenvolvidos para serem usados com o Vonage Client SDK. Basta criar uma conversa, passá-la para os componentes e pronto. Cada componente cuidará de todas as suas responsabilidades — como receber e enviar eventos —, permitindo que o desenvolvedor se concentre em outros aspectos de seu aplicativo. Sinceramente, eu não tinha certeza se outras pessoas achariam isso tão valioso quanto eu imaginava, então todos os elementos têm o estilo padrão.
Fico feliz em dizer que estava errado. Acontece que as pessoas estão usando isso, e o principal feedback foi sobre o estilo — ou a falta dele. Portanto, nesta postagem do blog, vamos abordar não apenas como aplicar estilos aos componentes do Client SDK, mas também aos Web Components em geral.
O Shadow DOM, uma das tecnologias que tornam os Web Components possíveis, pode impedir que o estilo de um Web Component seja afetado pela aplicação externa. Seria muito ruim se a aplicação tivesse uma section tag com position: absolute e isso modificasse a tag section do Web Component.
E se você quiser aplicar estilos aos elementos de um componente da Web? Seria bom se todos os botões do seu aplicativo tivessem a mesma aparência, não é mesmo?
Enquanto pesquisava sobre Web Components e analisava vários sistemas de design, observei que os desenvolvedores usavam propriedades personalizadas do CSS, também conhecidas como variáveis CSS. O autor do Web Component criava variáveis com algo como --myelement-button-color e as declarava assim:
button {
background-color: var(--myelement-button-color, red);
}Vermelho será a cor padrão caso a variável não esteja definida.
No aplicativo em questão, você pode atribuir um valor que combine com o restante do seu aplicativo, desta forma:
:root {
--myelement-button-color: blue;
}Ótimo! Todos os seus botões podem ter a mesma cor, mas e a cor da fonte do botão? Isso exigiria outra variável CSS. Quer deixar o raio da borda igual? Outra variável. A cor da borda? Pois é, outra variável.
Quanto mais personalizável for um componente da Web, mais o número de variáveis pode aumentar rapidamente. Isso também pode ser bastante limitante, pois você só tem acesso ao que é disponibilizado pelo autor do componente da Web.
O que podemos fazer?
É aqui que ::part entra em cena. É um pseudo-elemento CSS, como ::before e ::after, que permite acessar o Shadow DOM para aplicar estilos a uma parte identificada do Componente Web. Há um bom artigo sobre a história de como chegamos até aqui , escrito por Monica Dinculescu.
A título de exemplo, eis um botão que está dentro do Web Component:
<button part="button">Click Me</button>No aplicativo externo, você pode definir o estilo do botão selecionando-o da seguinte maneira:
custom-element::part(button) {
color: red;
border: 2px green solid;
font-size: 30px;
background-color: yellow;
}Dessa forma, o autor do Web Component precisa apenas nomear as diferentes partes do componente, e o usuário pode aplicar o estilo que quiser.
É bem incrível, né?
Com a introdução das propriedades personalizadas do CSS e do seletor ::part, vamos dar uma olhada nos componentes da Web da interface do usuário do Client SDK e ver como aplicar estilos a cada um deles.
Cada componente possui um embed para mostrar o estilo padrão. Remova o comentário do CSS para ver um exemplo de como o estilo pode ser personalizado. Fique à vontade para adicionar o seu próprio estilo e testá-lo.
Vamos começar com o componente mais simples, vc-typing-indicator. Trata-se apenas de texto, portanto você pode aplicá-lo da mesma forma que faria com qualquer outro texto em seu aplicativo. Veja um exemplo:
A seguir, temos vc-text-input. Esse componente tem duas partes. O campo de entrada onde o texto é digitado, chamado input, e o botão para enviar a mensagem, identificado como button.
Agora, quanto ao componente responsável por exibir as mensagens do chat, vc-messages. No nível externo, há a mensagem, cuja parte é identificada como message. A mensagem é composta pelo texto da mensagem, identificado como message-text e o usuário que enviou a mensagem é identificado como username.
Para diferenciar as mensagens do usuário do aplicativo web das mensagens de outras pessoas, adicionamos mine ao message, message-text, e username partes.
Observação: O exemplo não mostra uma diferença na mensagem desse usuário em relação às de outros usuários. Isso ocorre porque o usuário é identificado a partir da instância de `Conversation` passada ao componente. Aqui está uma captura de tela mostrando como fica o estilo padrão:
Screenshot of the default syling of the vc-messages Web Component
O vc-members componente lista os participantes do chat. Trata-se de uma lista não ordenada, na qual a lista é intitulada ul e os itens ou participantes são rotulados como li. Para poder aplicar estilo às linhas alternadas e tornar a lista mais fácil de ler, usamos variáveis CSS --vc-members-nth-child-odd-color e --vc-members-nth-child-even-color para adicionar um pouco de cor.
Por fim, eis o componente com o maior número de elementos, vc-keypad. Começando pelo topo, a exibição dos dígitos é identificada como input. Os botões estão agrupados em linhas e identificados row. Para selecionar uma linha específica, eles são identificados como position1 como position5. Assim, por exemplo, aplicar estilo à parte row position2 afetaria os botões 4, 5 e 6.
Cada botão é identificado button. Assim como nas linhas, para selecionar um botão específico, basta indicar sua posição. Por exemplo, o botão “#” pode ter seu estilo definido selecionando a parte button position12.
Para uma explicação muito mais detalhada, incluindo diagramas, consulte o repositório do GitHub do Client SDK UI Web Components.
Já abordamos como aplicar estilos aos Web Components e apresentamos, como exemplos, aqueles que criamos para funcionar com nossos SDKs de cliente.
Como você personaliza seus Web Components? Você já usou nossos componentes de interface do usuário do Client SDK? Conte para a gente no nosso canal da Comunidade no Slack!