ecv-component
WEB COMPONENTS
O que são web componentes?
Os componentes da Web são um conjunto de APIs de plataforma da Web que permitem criar novas tags HTML personalizadas, reutilizáveis e encapsuladas para uso em páginas e aplicativos da Web. Componentes e widgets personalizados baseados nos padrões de componentes da Web funcionarão em navegadores modernos e podem ser usados com qualquer biblioteca ou estrutura JavaScript que funcione com HTML.
Os componentes da Web são baseados em padrões da Web existentes. Recursos para suportar componentes da web estão sendo adicionados às especificações HTML e DOM, permitindo que os desenvolvedores estendam facilmente o HTML, com novos elementos com estilo encapsulado e comportamento personalizado.
Especificações
Custom Elements
Os elementos personalizados permitem que os desenvolvedores da web definam novas tags HTML, estendam as existentes e criem componentes da web reutilizáveis.
Elementos personalizados são a resposta para modernizar o HTML, preencher as peças que faltam e agrupar estrutura com comportamento. Se o HTML não fornecer a solução para um problema, podemos criar um elemento personalizado que o faça. Os elementos personalizados ensinam novos truques ao navegador, preservando os benefícios do HTML.
Shadow DOM
Shadow DOM é um dos três padrões de componentes da web, complementado por modelos HTML e elementos personalizados. Shadow DOM fornece uma maneira de definir o escopo dos estilos CSS para uma subárvore DOM específica e isola essa subárvore do resto do documento.
ES Modules
ESM é o sistema de módulo JavaScript padrão (ESM é uma abreviação para Módulos JavaScript que também é chamado de Módulos EcmaScript, em que “EcmaScript” é o nome oficial da especificação da linguagem JavaScript).
HTML Template
A especificação do elemento do modelo HTML define como declarar fragmentos de marcação que não são utilizados no carregamento da página, mas podem ser instanciados posteriormente em tempo de execução.
ECV COMPONENT
O que é:
É um conjunto de Web Componentes criado usando a biblioteca Lit Element, com o intuito de reaproveitar, acelerar e padronizar o desenvolvimento de projetos para o setor.
Estudo de caso
Durante aproximadamente um mês foram realizados diversos estudos e testes para encontrar uma forma de agilizar o processo de desenvolvimento na criação de layouts. Para isso, vários templates de diversos tipos layouts na web foram estudados dentre esses, alguns foram selecionados para que fosse feito a mesma montagem de sua estrutura de layout usando o ECV Component.
Por que usar ECV Component?
Percebeu que a cada projeto novo criado, precisaria recriar tudo novamente, refazer alguns componentes já criados em projetos
passados para sanar esse problema, foi desenvolvida a biblioteca ECV Component. A origem do nome veio das letras abreviadas
(E C V) que significam Elementos de Componentização Visual — Um nome que destaca a criação de componentes visuais reutilizáveis.
Installation
npm install ecv-component
Import
import 'ecv-component'
// Or, for specific component:
import { MeuComponente } from 'ecv-component'
Usando ECV Component
Básico sobre construção de layouts
Você pode criar layouts usando o ECV Component, simplesmente adicionando os componentes para compor seu projeto, mas é recomendado usar três componentes específicos para isso, são eles:
- ECV Row - Layout com posicionamento horizontal.
- ECV Column - Layout com posicionamento vertical.
- ECV Grid - Layout em forma de grid.
Layout com foco em posicionamento horizontal
Para se criar um layout com posicionamento horizontal usa-se o componente ECV Row. Veja abaixo um mesmo cenário usando a apenas estrutura HTML e outro usando, a estrutura ECV Component.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
}
</style>
<!-- HTML -->
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECV Components
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-row>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Posicionando componentes filhos
Para posicionar os componentes filhos usam propriedades que manipulam o eixo principal e eixo secundário, que são representados por flexJustify e flexAlign. Essas propriedades recebem valores de configurações específicos para efetuar o posicionamento, são elas:
- FlexRowJustifyContent - Posiciona os componentes filhos no eixo principal da row.
- FlexRowAlignItems - Posiciona os componentes filhos no eixo secundário da row.
Confira abaixo exemplos usando estrutura HTML e estrutura FlexRowJustifyContent:
Valor padrão de posicionamento horizontal
Quando usado, justifica no início do espaçamento horizontal os filhos da linha.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: start;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
render(): TemplateResult {
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.START}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Quando usado, centraliza os componentes no espaçamento horizontal dos filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: center;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros codigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Quando usado, justifica igualmente o espaçamento horizontal dos filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: space-evenly;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros codigos*/
...
render(): TemplateResult{
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.EVENLY}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Quando usado, justifica entre o espaçamento horizontal dos filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: space-between;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros codigos*/
...
render(): TemplateResult{
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.BETWEEN}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Quando usado, justifica ao redor o espaçamento horizontal dos filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: space-around;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.AROUND}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Quando usado, justifica no fim do espaçamento horizontal dos filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
justify-content: end;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*otros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-row flexJustify=${FlexRowJustifyContent.END}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Confira abaixo exemplos usando estrutura HTML e estrutura FlexRowAlignItems
Quando usado, alinha ao inicio do espaçamento vertical os componentes filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
align-items: start;
height: 200px;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
O uso do ECVBoxDecoration foi exclusivamente para gerar altura vertical para mostragem de posicionamento no eixo vertical!
/*outros códigos*/
...
render(): TemplateResult {
const customDecoration: BoxDecorationStyle = {
height: "200px"
}
return html`
<ecv-box-decoration .decoration=${customDecoration}>
<ecv-flex-row flexAlign=${FlexRowAlignItems.START}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
</ecv-box-decoration>
`;
}
Resultado do trecho de código acima
Quando usado, alinha no centro do espaçamento vertical os componentes filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
align-items: center;
height: 200px;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
O uso do ECVBoxDecoration foi exclusivamente para gerar altura vertical para mostragem de posicionamento no eixo vertical!
/*outros códigos*/
...
render(): TemplateResult {
const customDecoration: BoxDecorationStyle = {
height: "200px"
}
return html`
<ecv-box-decoration .decoration=${customDecoration}>
<ecv-flex-row flexAlign=${FlexRowAlignItems.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
</ecv-box-decoration>
`;
}
Resultado do trecho de código acima
Quando usado, alinha no fim do espaçamento vertical os componentes filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
align-items: end;
height: 200px;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
O uso do ECVBoxDecoration foi exclusivamente para gerar altura vertical para mostragem de posicionamento no eixo vertical!
/*outros códigos*/
...
render(): TemplateResult {
const customDecoration: BoxDecorationStyle = {
height: "200px"
}
return html`
<ecv-box-decoration .decoration=${customDecoration}>
<ecv-flex-row flexAlign=${FlexRowAlignItems.END}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
</ecv-box-decoration>
`;
}
Resultado do trecho de código acima
Quando usado, alinha-se ajustando ao espaçamento vertical os componentes filhos da row.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
align-items: stretch;
height: 200px;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
O uso do ECVBoxDecoration foi exclusivamente para gerar altura vertical para mostragem de posicionamento no eixo vertical!
/*outros códigos*/
...
render(): TemplateResult {
const customDecoration: BoxDecorationStyle = {
height: "200px"
}
return html`
<ecv-box-decoration .decoration=${customDecoration}>
<ecv-flex-row flexAlign=${FlexRowAlignItems.STRETCH}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
</ecv-box-decoration>
`;
}
Resultado do techo de código acima
Invertendo o posicionamento
Caso precise, você pode inverter o posicionamento dos filhos usando a propriedade reverseDirection, que inverte o eixo horizontal do componente pai.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: flex;
flex-direction: row-reverse;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-row ?reverseDirection=${true} flexJustify=${FlexRowJustifyContent.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-row>
`;
}
Resultado do trecho de código acima
Layout com foco em posicionamento vertical
Para se criar um layout com posicionamento vertical, usa-se o componente ECV Column Veja abaixo um mesmo cenário usando apenas a estrutura HTML, e outro usando a estrutura ECV Component.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
}
</style>
<!-- HTML -->
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECV Components
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho do código acima
Posicionando componentes filhos
Para posicionar os componentes filhos, usa-se propriedades que manipulam o eixo principal e eixo secundário, que são representados por flexJustify e flexAlign. Essas propriedades recebem valores de configurações específicos para efetuar o posicionamento, são eles:
- FlexRowJustifyContent - Posiciona os componentes filhos no eixo principal da row.
- FlexRowAlignItems - Posiciona os componentes filhos no eixo secundário da row.
Confira abaixo exemplos usando estrutura HTML e estrutura FlexColumnJustifyContent:
FlexColumnJustifyContent.START
Valor padrão de posicionamento vertical
Quando usado, justifica ao início do espaçamento vertical os filhos da coluna.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: start;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.START}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
FlexColumnJustifyContent.CENTER
Quando usado, justifica no centro do espaçamento vertical os filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
FlexColumnJustifyContent.EVENLY
Quando usado, justifica igualmente o espaçamento vertical dos filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.EVENLY}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho do código acima
FlexColumnJustifyContent.BETWEEN
Quando usado, justifica o espaçamento vertical dos filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.BETWEEN}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho do código acima
FlexColumnJustifyContent.AROUND
Quando usado, justifica ao redor o espaçamento vertical dos filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: space-around;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult{
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.AROUND}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho do código acima
Quando usado, justifica no fim do espaçamento vertical os filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
justify-content: end;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexJustify=${FlexColumnJustifyContent.END}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho do código acima
Confira abaixo exemplos usando estrutura HTML e estrutura FlexColumnAlignItems.
Quando usado, alinha no início do espaçamento horizontal os filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
align-items: start;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexAlign=${FlexColumnAlignItems.START}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
Quando usado, alinha ao centro do espaçamento horizontal os filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexAlign=${FlexColumnAlignItems.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
Quando usado, alinha no fim do espaçamento horizontal os filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
align-items: end;
}
</style>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexAlign=${FlexColumnAlignItems.END}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
Quando usado, alinha-se ajustando ao espaçamento horizontal dos filhos da column.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: flex;
flex-direction: column;
align-items: stretch;
}
</style>
<div class="container">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column flexAlign=${FlexColumnAlignItems.STRETCH}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
Invertendo o posicionamento
Caso precise, você pode inverter o posicionamento dos filhos usando a propriedade reverseDirection, que inverte o eixo vertical do componente pai.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: flex;
flex-direction: column-reverse;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-flex-column ?reverseDirection=${true} flexJustify=${FlexColumnJustifyContent.CENTER}>
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
`;
}
Resultado do trecho de código acima
Layout em forma sistema grid
Para se criar um layout em forma de grid usa-se o componente ECV Grid. Veja abaixo um mesmo cenário usando HTML puro, e outro usando ECV Component.
Exemplo usando HTML
<style>
/*CSS*/
.container{
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 200px 200px;
background-color: #1976D2;
padding: 20px;
margin-top: 20px;
}
.ladoEsquerdo,
.ladoDireito{
display: flex;
flex-direction: column;
}
</style>
<div class="container">
<div class="ladoEsquerdo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
<div class="ladoDireito">
<p>D</p>
<p>E</p>
<p>F</p>
</div>
</div>
Exemplo em ECV Components
/* mais codigos*/
...
render(): TemplateResult {
return html`
<ecv-grid columns="50% 50%" rows="200px 200px">
<ecv-flex-column rowGap="20px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-flex-column>
<ecv-flex-column rowGap="20px">
<ecv-text>D</ecv-text>
<ecv-text>E</ecv-text>
<ecv-text>F</ecv-text>
</ecv-flex-column>
</ecv-grid>
`;
}
Resultado do código acima
Adicionando colunas
Para adicionar colunas no ECVGrid, use a propriedade columns passando o valor de cada coluna do sistema de grid.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: grid;
grid-template-columns: 122px 200px;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponets
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-grid columns="122px 200px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-grid>
`;
}
Resultado do trecho de código acima
Adicionando Linhas
Para adicionar linhas no ECVGrid usa a propriedade rows passando o valor de cada linha do sistema de grid.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: grid;
grid-template-rows: 122px 200px;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponets
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-grid rows="122px 200px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-grid>
`;
}
Resultado do trecho de código acima
Espaçamento entre colunas
Você pode adicionar espaçamento entre colunas usando a propriedade columnGap.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: grid;
grid-template-columns: 23.333% 23.333% 23.333%;
column-gap: 10px;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-grid columns="23.333% 23.333% 23.333%" columnGap="10px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-grid>
`;
}
Resultado do trecho de código acima
Espaçamento entre linhas
Você pode adicionar espaçamento entre linhas usando a propriedade rowGap.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: grid;
grid-template-rows: 100px 100px 100px;
row-gap: 10px;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponents
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-grid rows="100px 100px 100px" rowGap="10px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-grid>
`;
}
Resultado do trecho de código acima
Espaçaamento entre ambos colunas e linhas
Caso precise você pode adicionar espaçamento para colunas e linhas ao mesmo tempo usando a propriedade gap do component ECVGrid.
Veja abaixo um exemplo usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
</style>
<div class="exemplo">
<p>A</p>
<p>B</p>
<p>C</p>
</div>
Exemplo usando ECVComponnets
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-grid columns="100px 100px 100px" rows="100px 100px 100px" gap="10px">
<ecv-text>A</ecv-text>
<ecv-text>B</ecv-text>
<ecv-text>C</ecv-text>
</ecv-grid>
`;
}
Resultado do trecho de código acima
Usando Espaçamento Interno e Externo
Usando ECVComponent, caso precise, você pode adicionar espaçamento interno e externo de três maneiras:
- usando ECVMargin - componente que manipula a propriedade de margin.
- usando ECVPadding - componente que manipula a propriedade de padding.
- usando ECVBoxDecoration - componente que permite a adição de margin e padding caso necessário.
Espaçamento Externo
O ECVMargin deve-se representar o papel de pai em estrutura hierárquica, envolvendo componente filho que receberá o espaçamento externo.
Confira abaixo exemplos usando estrutura HTML e estrutura ECVMargin.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
margin: 10px 30px;
background-color: #2196F3;
width: fit-content;
}
</style>
<p class="exemplo">usando margin</p>
Exemplo usando ECVComponents
Obs: O ECVBoxDecoration foi usado para ilustrar o espaçamento entre o layout e componente.
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-margin all="10px 30px">
<ecv-box-decoration .decoration=${{
backgroundColor: MaterialColors.blue[500],
width: "fit-content"
}}>
<ecv-text>usando margin</ecv-text>
</ecv-box-decoration>
</ecv-margin>
`;
}
Resultado do trecho de código acima
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
margin-left: 0;
background-color: #2196F3;
width: fit-content;
}
</style>
<p class="exemplo">usando margin</p>
Exemplo usando ECVComponents
Obs: O ECVBoxDecoration foi usado para ilustrar o espaçamento entre o layout e componente.
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-margin top="50px" right="0" bottom="50px" left="0">
<ecv-box-decoration .decoration=${{
backgroundColor: MaterialColors.blue[500],
width: "fit-content"
}}>
<ecv-text>usando margin</ecv-text>
</ecv-box-decoration>
</ecv-margin>
`;
}
Resultado do trecho de código acima
Espaçamento Interno
O ECVPadding deve representar o papel de pai em estrutura hierárquica, envolvendo componente filho que receberá o espaçamento interno.
Confira abaixo exemplos usando estrutura HTML e estrutura ECVPadding.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
background-color: #2196F3;
width: fit-content;
padding: 30px;
}
</style>
<p class="exemplo">usando padding</p>
Exemplo usando ECVComponents
Obs: O ECVBoxDecoration foi usado para ilustrar o espaçamento interno do componente.
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${{
backgroundColor: MaterialColors.blue[500],
width: "fit-content"
}}>
<ecv-padding all="30px">
<ecv-text>usando padding</ecv-text>
</ecv-padding>
</ecv-box-decoration>
`;
}
Resultado do trecho de código acima
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
padding-top: 5px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 40px;
background-color: #2196F3;
width: fit-content;
}
</style>
<p class="exemplo">usando padding</p>
Exemplo usando ECVComponents
Obs: O ECVBoxDecoration foi usado para ilustrar o espaçamento interno do componente.
/*mais códigos*/
...
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${{
backgroundColor: MaterialColors.blue[500],
width: "fit-content"
}}>
<ecv-padding top="5px" right="15px" bottom="10px" left="40px">
<ecv-text>usando padding</ecv-text>
</ecv-padding>
</ecv-box-decoration>
`;
}
Resultado do trecho de código acima
Container
O container é basicamente a div do HTML, para renderizar um container no ECV Component é necessario usar o componente ECV BoxDecoration, que é utilizado para agrupar componentes. Para estilizar o container, precisa chamar a propriedade decoration onde espera receber um objeto do tipo BoxDecorationStyle que contém todas as configurações de estilo.
Alterando tamanho, cor, borda e sombra
Para estilizar seu tamanho, cor, borda e sombra, precisa passar para o objeto BoxDecorationStyle as respectivas propriedades que manipulam o container.
Exemplo usando HTML
<style>
.container{
width: 200px;
height: 200px;
margin: 60px;
background-color: #1976D2;
border: 2px solid black;
box-shadow: 6px 9px 54px -15px rgba(0,0,0,0.56);
}
</style>
<div class="container"></div>
Exemplo em ECV Components
const CONTAINER: BoxDecorationStyle = {
width: "200px",
height: "200px",
marginAll: "60px",
backgroundColor: MaterialColors.blue[500],
borderAll: "2px solid black",
boxShadow: "6px 9px 54px -15px rgba(0,0,0,0.56)",
}
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${CONTAINER}></ecv-box-decoration>
`;
}
Resultado do código acima:
Visibilidade
Para fazer o container desaparecer, precisa passar para o objeto BoxDecorationStyle a propriedade visible, sendo ela do tipo Boolean, por padrão é true, para fazer o container desaparecer basta passar false para a propriedade.
Exemplo em HTML Puro
<style>
.container{
width: 200px;
height: 200px;
background-color: #2196F3;
display: none;
}
</style>
<div class="container"></div>
Exemplo em ECV Components
const CONTAINER: BoxDecorationStyle = {
width: "200px",
height: "200xp",
backgroundColor: MaterialColors.blue[500],
visible: false,
}
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${CONTAINER}></ecv-box-decoration>
`;
}
formas:
Para manipular as formas, precisa passar para o objeto BoxDecorationStyle, as propriedades de manipulação de bordas, como por exemplo, o borderAllRadius ou borderBottomLeftRadius, assim por diante.
Abaixo mostramos somente a alteração do lado direito do topo e esquerdo de baixo, poderíamos alterar outros lados caso precisássemos.
Exemplo usando HTML
<style>
.container{
width: 200px;
height: 200px;
border-bottom-left-radius: 80px;
border-top-right-radius: 100px;
background-color: #1976D2;
margin: 50px;
}
</style>
<div class="container"></div>
Exemplo em ECV Components
const CONTAINER: BoxDecorationStyle = {
width: "200px",
height: "200px",
backgroundColor: MaterialColors.blue[500],
marginAll: "50px",
borderBottomLeftRadius: "80px",
borderTopRightRadius: "100px",
}
render(): TemplatResult{
return html`
<ecv-box-decoration .decoration=${CONTAINER}></ecv-box-decoration>
`;
}
Resultado do código acima:
Fazendo Círculos:
Para poder criar Círculos, existem duas formas, sendo elas:
O ECV CircleBox é uma maneira mais agil para a criação de círculos. Já para criar o círculo com ECV BoxDecoration é necessário chamar a sua propriedade decoration, onde espera receber um objeto do tipo BoxDecorationStyle.
Exemplo em HTML Puro
<style>
.estilizando_circulo{
background-color: #2196F3;
width: 200px;
height: 200px;
border-radius: 50%;
margin-top: 50px;
}
</style>
<div class="estilizando_circulo"></div>
Exemplo em ECV Components
//ECV CircleBox
const ESTILIZANDO_CIRCULO: BoxDecorationStyle = {
marginAll: "50px",
}
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${ESTILIZANDO_CIRCULO}>
<ecv-circle-box size="200px" color=${MaterialColors.blue[500]}></ecv-circle-box>
</ecv-box-decoration>
`;
}
//ECV BoxDecoration
const ESTILIZANDO_CIRCULO: BoxDecorationStyle = {
backgroundColor: MaterialColors.blue[500],
width: "200px",
height: "200px",
borderAllRadius: "50%",
marginAll: "50px",
}
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${ESTILIZANDO_CIRCULO}></ecv-box-decoration>
`;
}
Resultado do código acima:
Posicionamento e tamanhos:
Caso seja necessário pode-se alterar o posicionamento do componente fazendo com que o fluxo do layout se altere modificando sua renderização. Para tal ação deve se usar o componente ECV PositionedBox que possibilita o posicionamento do mesmo fora do fluxo normalmente do layout. Veja abaixo um mesmo cenário usando HTML e outro usando ECV Component.
Mudando o fluxo do layout usando posicionamento
A mudança do fluxo é feita através da propriedade position, que espera receber um Enum do tipo Position, por padrão o valor é Position.RELATIVE.
Exemplo em HTML
<style>
.container__1{
width: 300px;
height: 300px;
background-color: black;
position: relative;
margin: 60px;
}
.container__2{
position: absolute;
left: 180px;
}
.container_3{
background-color: #2196F3;
width: 180px;
height: 180px;
box-shadow: 6px 9px 54px -15px rgba(0,0,0,0.56);
}
</style>
<div class="container__1">
<div class="container__2">
<div class="container_3"></div>
</div>
</div>
Exemplo usando ECV Components
Uma possibilidade de estilizar o ECV BoxDecoration é passando dentro da chaves sua propriedade, como mostrado abaixo:
const CONTAINER: BoxDecorationStyle = {
width: "180px",
height: "180px",
backgroundColor: MaterialColors.blue[500],
boxShadow: "6px 9px 54px -15px rgba(0,0,0,0.56)",
}
render(): TemplateResult{
return html`
<ecv-positioned-box>
<ecv-box-decoration .decoration=${{backgroundColor:"black",width:"300px",height:"300px",marginAll:"60px"}}>
<ecv-positioned-box position=${Position.ABSOLUTE} left="180px">
<ecv-box-decoration .decoration=${CONTAINER}></ecv-box-decoration>
</ecv-positioned-box>
</ecv-box-decoration>
</ecv-positioned-box>
`;
}
Resultado do código acima:
Usando Texto:
Para realizar as manipulações de texto, precisa envolver o texto no componente ECV Text ou no ECV TextSpan, após envolver o texto, precisa chama a propriedade textStyle, que espera receber um objeto do tipo TextStyle. Veja abaixo um mesmo cenário usando HTML puro e outro usando ECV Component.
Exemplo em HTML
.estilizando_texto{
font-size: 40px;
color: #2196F3;
}
<p class="estilizando_texto">Meu primeiro Texto</p>
Exemplo em ECV Components
//ECV Text
const ESTILIZANDO_TEXTO: TextStyle = {
size: "40px",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-text .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text>
`;
}
//ECV TextSpan
const ESTILIZANDO_TEXTO: TextStyle = {
size: "40px",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-text-span .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text-span>
`;
}
Resultado do código acima:
Espaçamento do texto
Para colocar espaçamento no texto, precisa chamar a propriedade textStyle e passar para o objeto do tipo TextStyle, a propriedade letterSpacing. Veja abaixo um mesmo cenário usando HTML puro e outro usando ECV Component.
Exemplo em HTML
<style>
.estilizando_texto{
font-size: 40px;
color: #2196F3;
letter-spacing: 20px;
}
</style>
<p class="estilizando_texto">Meu primeiro texto</p>
Exemplo em ECV Components
//ECV TextSpan
const ESTILIZANDO_TEXTO: TextStyle = {
size: "40px",
color: MaterialColors.blue[500],
letterSpacing: "20px",
}
render(): TemplateResult{
return html`
<ecv-text .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text>
`;
}
//ECV TextSpan
const ESTILIZANDO_TEXTO: TextStyle = {
size: "40px",
color: MaterialColors.blue[500],
letterSpacing: "20px",
}
render(): TemplateResult{
return html`
<ecv-text-span .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text-span>
`;
}
Resultado do código acima:
Formatação
Para alterar peso da fonte do texto, precisa chamar a propriedade textStyle e passar para o objeto do tipo TextStyle, a propriedade weight do tipo FontWeight. Veja abaixo um mesmo cenário usando HTML puro e outro usando ECV Component.
Exemplo em HTML
<style>
.estilizando_texto{
font-weight: bold;
color: #2196F3;
font-size: 40px,
}
</style>
<p class="estilizando_texto">Meu primeiro texto</p>
Exemplo em ECV Components
//ECV Text
const ESTILIZANDO_TEXTO: TextStyle = {
weight: FontWeight.Bold,
color: MaterialColors.blue[500],
size: "40px",
}
render(): TemplateResult{
return html`
<ecv-text .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text>
`;
}
//ECV TextSpan
const ESTILIZANDO_TEXTO: TextStyle = {
weight: FontWeight.Bold,
color: MaterialColors.blue[500],
size: "40px",
}
render(): TemplateResult{
return html`
<ecv-text-span .textStyle=${ESTILIZANDO_TEXTO}>Meu primeiro texto</ecv-text-span>
`;
}
Resultado do código acima:
Usando Links
Caso precise, você pode adicionar navegações por hyperlinks usando o componente ECVHyperlink no lugar que você precisar do seu projeto.
Abrindo Link na mesma aba
Para gerar um hyperlink que abra na mesma aba basta adionar o ECVHyperlink no seu projeto.
Veja abaixo exemplos usando estrutura HTML e estrutura ECVComponent.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
}
</style>
<a class="exemplo" href="https://www.google.com.br">Google!</a>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-hyperlink link="https://www.google.com.br">Google!</ecv-hyperlink>
`;
}
Resultado do trecho de código acima
Abrindo Link em outra aba
Para gerar um hyperlink que abra em uma aba diferente deve-se usar a propriedade openOutside com um valor "false" como string.
Veja abaixo exemplo usando estrutura HTML e estrutura ECVComponents.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
}
</style>
<a href="https://www.google.com.br" target="_blank">Google!</a>
Exemplo usando ECVComponents
/*outros códigos*/
...
render(): TemplateResult {
return html`
<ecv-hyperlink link="https://www.google.com.br" openOutside="true">Google!</ecv-hyperlink>
`;
}
Resultado do trecho de código acima
Estilizando Link
O link é estilizado adicionando propriedades especificas que manipulam os estados de estilo, são eles:
- clickedState - estado de click do link.
- visitedState - estado visitado do link.
- hoverState - estado de hover do link.
Veja abaixo exemplo usando estrutura HTML e estrutura ECVComponents.
Exemplo usando HTML
<style>
/*CSS*/
.exemplo{
}
.exemplo:active{
color: red;
font-size: 16px;
font-weight: "bold";
letter-spacing: 2px;
font-family: "Arial";
line-height: "10px";
font-style: "normal";
text-indent: "3px";
text-shadow: "2px 2px #ff0000";
text-transform: "none";
}
.exemplo:visited{
color: orange;
font-size: 24px;
font-weight: "normal";
letter-spacing: 5px;
font-family: "Arial";
line-height: "10px";
font-style: "normal";
text-indent: "3px";
text-shadow: "2px 2px #ff0000";
text-transform: "none";
}
.exemplo:hover{
color: grey;
font-size: 30px;
font-weight: "bold";
letter-spacing: 2px;
font-family: "Arial";
line-height: "10px";
font-style: "normal";
text-indent: "3px";
text-shadow: "2px 2px #ff0000";
text-transform: "uppercase";
}
</style>
<a class="exemplo" href="https://www.google.br" target="_blank">Google!</a>
Exemplo usando ECVComponents
/*mais códigos*/
...
render(): TemplateResult {
const exemploHoverState: TextStyle = {
color: MaterialColors.grey[500],
size: "30px",
weight: FontWeight.Bold,
letterSpacing: "2px",
lineHeight: "10px"
}
const exemploVisitedState: TextStyle = {
color: MaterialColors.orange[500],
size: "24px",
weight: FontWeight.W500,
letterSpacing: "5px",
}
return html`
<ecv-hyperlink link="https://www.google.com.br" openOutside="true" .hoverState=${exemploHoverState} .visitedState=${exemploVisitedState}>Google!</ecv-hyperlink>
`;
}
Resultado do trecho de código acima
Ícones:
Renderizando ícones:
Para renderizar ícones no seu projeto utilizando os ECV Component, trabalharemos com o componente denominado ECVIcon. Seu funcionamento é bem simples, basta utilizar a tag customizada ecv-icon. Para que o ícone seja renderizado, devemos utilizar o atibuto icon do tipo IconTypes onde selecionaremos o nome do ícone através de um Enum.
Obs: Não será necessário criar um link com o endereço da biblioteca no documento index.html, o componente já faz este trabalho.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols"/>
<body>
<span class="material-symbols-outlined">home</span>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
return html `
<ecv-icon .icon=${IconTypes.Home}></ecv-icon>
`;
}
Resultado do código acima:
Estilizando ícones:
Para estilizar o ícone, devemos utilizar o atributo iconStyle que será do tipo TextStyle contendo as propriedades necessárias para a sua estilização.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols"/>
<style>
.icon_style{
color: #17aff4;
font-size: 35px;
}
</style>
<body>
<span class="material-symbols-outlined icon_style">home</span>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_ICONE: TextStyle = {
color: `${MaterialColors.blue[400]}`,
size: "35px",
}
return html`
<ecv-icon .icon=${IconTypes.Home} .iconStyle=${ESTILIZANDO_ICONE}></ecv-icon>
`;
}
Resultado do código acima:
Preenchimento de ícone
Para fazer o preenchimento do ícone, a propriedade filled que recebe um dado do tipo boolean deverá ser instanciada, lembrando que o preenchimento é opcional.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols"/>
<style>
.material-symbols-outlined{
font-variation-settings:
'FILL' 1, /*Aqui declaramos o preenchimento do ícone com os valores 0 ou 1, sendo 1 preenchido e 0 sem preenchimento*/
'wght' 400,
'GRAD' 0,
'opsz' 24;
}
.icon_style{
color: #17aff4;
font-size: 35px;
}
</style>
<body>
<span class="material-symbols-outlined icon_style">home</span>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_ICONE: TextStyle = {
color: `${MaterialColors.blue[400]}`,
size: "35px",
}
return html`
<ecv-icon .icon=${IconTypes.Home} .iconStyle=${ESTILIZANDO_ICONE} ?filled=${true}></ecv-icon>
`;
}
Resultado do código acima:
Botões
Nesta sessão abordaremos os conceitos e os tipos de botões que compõem a biblioteca dos ECV Component. A usabilidade segue o padrão dos demais componentes, porém, cada botão foi desenvolvido para modelos distintos de layout, sendo botão com texto, botão com ícone e botão com texto e ícone.
Similaridades dos botões
Os botões possuem algumas similaridades em sua construção, a primeira a ser observada é que os botões herdam o tamanho de seu pai, então para manipular altura e largura, ele deverá herdar estes parâmetros de seu pai e por recomendação o componente que passará os parâmetros de altura e largura deverá ser um ECVBoxDecoration e assim o botão se ajustará automaticamente. Outra característica em comum é a propriedade onPressed do tipo VoidFunction que tem a mesma responsabilidade que o evento onclick no HTML convencional. em segundo temos a última similaridade que é o estado de hover dos botões, utilizamos a propriedade hoverState do tipo HoverState que definirá o estilo do botão quando o cursor estiver sobre ele. Os exemplos serão abordados mais adiante na documentação.
Botão com texto
Começando pelo EcvTextButton que foi idealizado para ser utilizado quando houver necessidade de criar um botão simples com texto. Para renderiza-lo, devemos usar a tag customizada ecv-text-button. O texto deverá ficar entre as tags de abertura e fechamento.
Exemplo usando HTML
<body>
<button>Click Me!</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button>Click Me!</ecv-text-button>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Estilizando o ECVTextButton
A estilização do ECVTextButton é dividida em duas partes. A primeira parte define o estilo do corpo do botão e para isso temos a propriedade buttonStyle do tipo ButtonStyle que fará alterações como background-color, border, padding etc. A segunda parte define o estilo do texto com o uso da propriedade textStyle do tipo Textstyle, alterando font-size, color, font-weight, etc.
Exemplo usando HTML
<style>
button{
background-color: #2096f3;
color: white;
font-weight: 600;
padding: 10px;
}
</style>
<body>
<button>Click Me!</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_TEXTO: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
}
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button .textStyle=${ESTILIZANDO_TEXTO} .buttonStyle=${ESTILIZANDO_BOTAO}>Click Me!</ecv-text-button>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Botão com ícone
Outro exemplo é o ECVIconButton que tem como objetivo renderizar um botão com ícone, sendo assim, devemos utilizar a tag customizada ecv-icon-button em conjunto com a propriedade icon do tipo IconTypes e através do Enum definir um ícone para o botão.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols" />
<body>
<button>
<span class="material-symbols-outlined">home</span>
</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-icon-button .icon=${IconTypes.Download}></ecv-icon-button>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Estilizando ECVIconButton
A estilização do ECVIconButton segue o modelo em duas etapas, assim como o ECVTextButton, definindo o estilo para o corpo do botão com a propriedade buttonStyle do tipo ButtonStyle, e a estilização do ícone com a propriedade iconStyle do tipo TextStyle.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols"/>
<style>
button{
background-color: #2096f3;
color: white;
padding: 10px;
}
</style>
<body>
<button>
<span class="material-symbols-outlined">home</span>
</button>
</body>
Exemplo usando HTML
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_ICONE: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
}
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-icon-button .icon=${IconTypes.Download} .iconStyle=${ESTILIZANDO_ICONE} .buttonStyle=${ESTILIZANDO_BOTAO}></ecv-icon-button>
</ecv-box-decoration>
`;
}
Resultado do código acime:
Botão com texto e ícone
Por último temos o ECVTextButtonIcon, que como o nome já diz, é um botão que pode ter um texto e um ícone. Para renderiza-lo no projeto devemos utilizar a tag ecv-text-button-icon com a propriedade icon do tipo IconTypes e o texto deverá ficar entre as tags de abertura e fechamento.
Exemplo em HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols"/>
<style>
button{
display: flex;
align-items: center;
/*Este CSS tem a responsabilidade de alinhar o conteúdo do botão ao centro do eixo horizontal*/
}
</style>
<body>
<button>
<span class="material-symbols-outlined">Download</span>
<span>Download</span>
</button>
</body>
Exemplo com ECV Components
render(): TemplateResult {
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button-icon .icon=${IconTypes.Download}>Download</ecv-text-button-icon>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Estilizando o ECVTextButtonIcon
As definições de estilo deste componente são separadas em três partes, sendo elas corpo do botão, ícone e texto. Para estilizar o corpo do botão usamos a propriedade buttonStyle do tipo ButtonStyle, para o ícone a propriedade iconStyle do tipo TextStyle, e para o texto a propriedade textStyle também do tipo TextStyle.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols" />
<style>
button{
display: flex;
align-items: center;
gap: 4px;
background-color: #2096f3;
padding: 10px;
}
.icone{
color: orange;
text-shadow: 1px 1px black;
}
.texto{
color: white;
font-weight: 600;
}
</style>
<body>
<button>
<span class="material-symbols-outlined icone">Download</span>
<span class="texto">Download</span>
</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_ICONE: TextStyle = {
color: `${MaterialColors.orange[500]}`,
shadow: `1px 1px ${MaterialColors.grey[900]}`
}
const ESTILIZANDO_TEXTO: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
shadow: `1px 1px 1px ${MaterialColors.grey[900]}`
}
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button-icon .icon=${IconTypes.Download} .iconStyle=${ESTILIZANDO_ICONE} .textStyle=${ESTILIZANDO_TEXTO} .buttonStyle=${ESTILIZANDO_BOTAO}>Download</ecv-text-button-icon>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Invertendo posição entre texto e ícone
Sabemos que alterações no layout do projeto podem acontecer e, prevendo isso, adicionamos a propriedade reversePosition do tipo boolean que inverte a posição entre o texto e o ícone. Por padrão o texto é posicionado no lado direito do botão e o ícone no esquerdo, assim o valor que a propriedade recebe por padrão é false. Para que a ordem seja alterada, basta informar o valor true que as posições serão alteradas.
Exemplo usando HTML
<link rel="stylesheet" href="link da biblioteca Material Symbols" />
<style>
button{
display: flex;
align-items: center;
gap: 4px;
background-color: #2096f3;
padding: 10px;
color: white;
}
</style>
<body>
<button>
<span>Inverso</span>
<span class="material-symbols-outlined">arrow_back_ios</span>
<!-- Para inverter a posição de ícone e texto usando HTML basta inverter a ordem das tags <span> -->
</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_TEXTO: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
}
return html`
<ecv-flex-column>
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button-icon .icon=${IconTypes.ArrowBackIoS} .textStyle=${ESTILIZANDO_TEXTO} .buttonStyle=${ESTILIZANDO_BOTAO} ?reversePosition=${true}>Inverso</ecv-text-button-icon>
</ecv-box-decoration>
</ecv-flex-column>
`;
}
Resultado do código acima:
Botão HoverState
Segue o exemplo funcional da propriedade hoverState
Exemplo usando HTML
<style>
button{
background-color: #2096f3;
color: white;
font-weight: 600;
cursor: pointer;
}
button:hover{
background-color: orange;
color: black;
font-weight: 600;
}
</style>
<body>
<button>Click Me!</button>
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_HOVER: HoverState = {
backgroundColor: `${MaterialColors.orange[500]}`,
color: `${MaterialColors.grey[900]}`,
}
const ESTILIZANDO_TEXTO: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
}
return html`
<ecv-flex-column>
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button .hoverState=${ESTILIZANDO_HOVER} .textStyle=${ESTILIZANDO_TEXTO} .buttonStyle=${ESTILIZANDO_BOTAO}>Click Me!</ecv-text-button>
</ecv-box-decoration>
</ecv-flex-column>
`;
}
Resultado do código acima:
ECVButton onPressed
Segue o exemplo funcional da propriedade onPressed
Exemplo usando HTML
<style>
button{
background-color: #2096f3;
color: white;
font-weight: 600;
}
</style>
<body>
<button onclick="alerta()">Click Me!</button>
</body>
<script>
//Este exemplo foi escrito em JavaScript
function alerta() {
alert('Este é um alerta! Você clicou no botão.')
}
</script>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_BOTAO: ButtonStyle = {
backgroundColor: `${MaterialColors.blue[500]}`,
paddingAll: "10px",
}
const ESTILIZANDO_TEXTO: TextStyle = {
color: `${MaterialColors.grey[100]}`,
weight: FontWeight.W600,
shadow: `1px 1px 1px ${MaterialColors.grey[900]}`
}
return html`
<ecv-box-decoration .decoration=${{width: "100px"}}>
<ecv-text-button .textStyle=${ESTILIZANDO_TEXTO} .buttonStyle=${ESTILIZANDO_BOTAO} .onPressed=${this._alerta}>Click Me!</ecv-text-button>
</ecv-box-decoration>
`;
}
private _alerta(): void{
alert('Este é um alerta! Você clicou no botão.')
}
Resultado do código acima:
Imagens:
Renderizando imagens:
Para renderizar imagens no seu projeto utilizando os ECV Component, trabalharemos com um componente que foi construído especificamente para esta função, denominado ECVImage.
Seu funcionamento é bem simples, basta utilizar a tag customizada ecv-image e o endereço da imagem com a propriedade reativa source e visando a acessibilidade, temos a descrição da imagem com a propriedade description. Ambas propriedades recebem dados do tipo string.
Exemplo usando HTML
<body>
<img src="endereço da imagem e formato" alt="descrição da imagem">
</body>
Exemplo usando ECV Components
render(): TemplateResult {
return html `
<ecv-image source="endereço da imagem e formato" description="descrição da imagem"></ecv-image>
`;
}
Resultado do código acima:
Estilizando imagens:
Para estilizar a imagem, temos o atributo imageDecoration, que deve ser do tipo ImageDecoration, contendo as propriedades necessárias para a estilização da mesma.
Exemplo usando HTML
<style>
.img{
width: 600px;
height: 400px;
border-radius: 20px;
filter: grayscale(60%);
}
</style>
<body>
<img class="img" src="endereço da imagem">
</body>
Exemplo usando ECV Components
render(): TemplateResult {
const ESTILIZANDO_IMAGEM: ImageDecoration = {
width: "600px",
height: "400px",
borderAllRadius: "20px",
filterEffect: "grayscale(60%)",
}
return html`
<ecv-image source="endereço da imagem" .imageDecoration=${ESTILIZANDO_IMAGEM}></ecv-image>
`;
}
Resultado do código acima:
CheckBox
Para renderizar o checkbox usa-se o componente ECV CheckBox, muito utilizado em formulários.
Exemplo usando HTML
<style>
.meuCheckbox{
margin: 25px;
}
</style>
<div class="meuCheckBox">
<input name="checkbox" type="checkbox">
<label for="checkbox">Meu primeiro CheckBox</label>
</div>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-margin all="25px">
<ecv-checkbox label="Menu primeiro CheckBox"></ecv-checkbox>
</ecv-margin>
`;
}
Resultado do código acima:
Como atribuir o Checked
Para deixar o checkbox já checado (checked), precisa chamar a propriedade checked, que é do tipo boolean, por padão é false, ou seja, para deixar com checked, basta passar true.
Exemplo usando HTML
<style>
.meuCheckbox{
margin: 25px;
}
</style>
<div class="meuCheckBox">
<input name="checkbox" type="checkbox" checked>
<label for="checkbox">Meu primeiro CheckBox</label>
</div>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-margin all="25px">
<ecv-checkbox label="Menu primeiro CheckBox" ?checked=${true}></ecv-checkbox>
</ecv-margin>
`;
}
Resultado do código acima:
Alterando o tamanho
Para alterar o tamanho do ECV CheckBox, precisa chamar a propriedade size, que espera receber um Enum do tipo InputFieldSize, por padrão o tamanho é InputFieldSize.NORMAL.
Exemplo usando HTML
<style>
.meuCheckbox{
margin: 25px;
}
input[type=checkbox]{
width: 30px;
height: 30px;
}
</style>
<div class="meuCheckBox">
<input name="checkbox" type="checkbox">
<label for="checkbox">Meu primeiro CheckBox</label>
</div>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-margin all="25px">
<ecv-checkbox label="Menu primeiro CheckBox" .size=${InputFieldSize.BIG}></ecv-checkbox>
</ecv-margin>
`;
}
Resultado do código acima:
Estilizando o CheckBox
Para estilizar o componente, precisa chamar a propriedade checkBoxStyle, que espera receber um objeto do tipo CheckboxStyle.
Estamos estilizando a cor de fundo do checkbox quando ele está no estado CHECKED
Exemplo usando HTML
<style>
.meuCheckbox{
margin: 25px;
}
input[type=checkbox] {
position: relative;
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:yellow;
}
input[type=checkbox]:checked:before {
background-color: black;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px;
}
</style>
<div class="meuCheckBox">
<input name="checkbox" type="checkbox" checked>
<label for="checkbox">Meu primeiro CheckBox</label>
</div>
Exemplo usando ECV Components
const MEU_CHECKBOX: CheckboxStyle = {
backgroundColorChecked: "black",
}
render(): TemplateResult{
return html`
<ecv-margin all="25px">
<ecv-checkbox label="Menu primeiro CheckBox" ?checked=${true} .checkBoxStyle=${MEU_CHECKBOX}></ecv-checkbox>
</ecv-margin>
`;
}
Resultado do código acima:
Estilizando Texto do CheckBox
Para estilizar o texto do componente, é necessario chamar a porpriedade labelStyle, que espera receber um objeto do tipo TextStyle.
Exemplo usando HTML
<style>
.meuCheckbox{
margin: 25px;
}
label{
font-size: 25px;
color: #1976D2;
}
</style>
<div class="meuCheckBox">
<input name="checkbox" type="checkbox" checked>
<label for="checkbox">Meu primeiro CheckBox</label>
</div>
Exemplo usando ECV Components
O Tamanho do texto é aumentado de acordo com o tamanho do checkbox, da propriedade size.
const MEU_TEXTO: TextStyle = {
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-margin all="25px">
<ecv-checkbox label="Menu primeiro CheckBox" .labelStyle=${MEU_TEXTO} .size=${InputFieldSize.BIG}></ecv-checkbox>
</ecv-margin>
`;
}
Resultado do código acima:
Utilizando o TextArea
O textarea é uma caixa de texto de múltiplas linhas, para renderizar o componente usa-se o componente ECV TextArea, para estilizar o componente precisa chamar a propriedade textAreaStyle, que espera receber um objeto do tipo BoxDecorationStyle.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
margin: 40px;
}
</style>
<textarea class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
marginAll: "40px",
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA}></ecv-textarea>
`;
}
Resultado do código acima:
Placeholder
Para inserir o placeholder é necessario chamar a propriedade hint, já para estilizar é necessario chamar a propriedade hintSyle, que espera receber um objeto do tipo TextStyle.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
.meu__textarea::placeholder{
font-size: 30px;
font-style: italic;
color: #2196F3;
}
</style>
<textarea class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
const PLACEHOLDER: TextStyle = {
size: "30px",
fontStyle: "italic",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Placeholder" .textAreaStyle=${MEU_TEXTAREA} .hintSyle=${PLACEHOLDER}></ecv-textarea>
`;
}
Resultado do código acima:
Inserindo um Label
Para inserir um Label no componente, precisa chamar a propriedade label e passar o texto, por padrão ele é vazio.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
</style>
<label for="meuTextArea">Meu Label</label>
<textarea name="meuTextArea" class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA} label="Meu Label"></ecv-textarea>
`;
}
Resultado do código acima:
Estilizando o Label
Para estilizar o Label precisa chamar a propriedade labelStyle, que espera receber um objeto do tipo TextStyle.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
.meu__Label{
font-size: 25px;
color: #2196F3;
}
</style>
<label for="meuTextArea" class="meu__Label">Meu Label</label>
<textarea name="meuTextArea" class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
const MEU_LABEL: TextStyle = {
size: "25px",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA} .labelStyle=${MEU_LABEL} label="Meu Label"></ecv-textarea>
`;
}
Resultado do código acima:
Posicionamento do Label Horizontal
Para poder mudar o posicionamento da Label na Horizontal, utilizar a propriedade positionLabelRow, que espera receber um Enum do tipo PositionLabelRow.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
.container{
display: flex;
flex-direction: row-reverse;
align-items: end;
}
</style>
<div class="container">
<label for="meuTextArea">Meu Label</label>
<textarea name="meuTextArea" class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
</div>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA} label="Meu Label" positionLabelRow=${PositionLabelRow.RIGHT_START}></ecv-textarea>
`;
}
Resultado do código acima:
Posicionamento do Label Vertical
Para poder mudar o posicionamento da Label na Vertical, utilizar a propriedade positionLabelColumn, que espera receber um Enum do tipo PositionLabelColumn.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
.container{
display: flex;
flex-direction: column;
align-items: end;
}
</style>
<div class="container">
<label for="meuTextArea">Meu Label</label>
<textarea name="meuTextArea" class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
</div>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA} label="Meu Label" positionLabelColumn=${PositionLabelColumn.TOP_END}></ecv-textarea>
`;
}
Resultado do código acima:
Estilizando Texto
A forma para estilizar o texto do textarea é utilizando o componente textStyle, que espera receber um objeto do tipo TextStyle.
Exemplo usando HTML
<style>
.meu__textArea{
width: 400px;
font-size: 25px;
color: #2196F3;
}
</style>
<textarea class="meu__textArea" rows="4">Meu primeiro texto</textarea>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
const MEU__TEXTO: TextStyle = {
size: "25px",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-textarea rows="4" .textAreaStyle=${MEU_TEXTAREA} .textStyle=${MEU__TEXTO}></ecv-textarea>
`;
}
Resultado do código acima:
Espaçamento entre os elementos
Para inserir um espaçamento entre eles, precisa utilizar a propriedade gap.
Exemplo usando HTML
<style>
.meu__textarea{
width: 400px;
}
.container{
display: flex;
gap: 20px;
}
</style>
<div class="container">
<label for="meuTextArea">Meu Label</label>
<textarea name="meuTextArea" class="meu__textarea" rows="10" cols="16" placeholder="Meu primeiro TextArea"></textarea>
</div>
Exemplo usando ECV Components
const MEU_TEXTAREA: BoxDecorationStyle = {
width: "400px",
}
render(): TemplateResult{
return html`
<ecv-textarea rows="10" columns="16" hint="Meu primeiro TextArea" .textAreaStyle=${MEU_TEXTAREA} label="Meu Label" gap="20px"></ecv-textarea>
`;
}
Resultado do código acima:
Adicionando Scroll
Para colocar scroll em um determinado lugar, utilizar o componente ECV ScrollViewBox.
Exemplo usando HTML
<style>
.container__scroll{
width: 200px;
height: 200px;
overflow-y: scroll;
}
.scroll__filho{
height: 450px;
background-color: #2196F3;
}
</style>
<div class="container__scroll">
<div class="scroll__filho"></div>
</div>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-scroll-view-box width="200px" height="200px">
<ecv-box-decoration .decoration=${{height: "450px", backgroundColor: "#2196F3"}}></ecv-box-decoration>
</ecv-scroll-view-box>
`;
}
Resultado do código acima:
Inserindo um Input
Para renderizar um input, é necessario inserir o componente ECV TextField, já para estilizar o input, é necessário chamar a propriedade textFieldStyle, que espera receber um objeto do tipo TextFieldStyle.
Exemplo usando HTML
<style>
input{
width: 200px;
background-color: #2196F3;
border-radius: 20px;
}
</style>
<input type="text">
Exemplo usando ECV Components
const MEU__INPUT: TextFieldStyle = {
backgroundColor: MaterialColors.blue[500],
borderAllRadius: "20px",
}
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${{width: "200px"}}>
<ecv-text-field .textFieldStyle=${MEU__INPUT}></ecv-text-field>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Placeholder
Para adicionar o placeholder, é necessário chamar a propriedade hint.
Exemplo usando HTML
<style>
input{
width: 200px;
}
</style>
<input type="text" placeholder="Meu Input">
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${{width: "200px"}}>
<ecv-text-field hint="meu Input"></ecv-text-field>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Estilizando Placeholder
Para estilizar precisa chamar a propriedade hintSyle, que espera receber um objeto do tipo TextStyle.
Exemplo usando HTML
<style>
input{
width: 200px;
}
input::placeholder{
color: #2196F3;
font-size: 20px;
font-style: italic;
}
</style>
<input type="text" placeholder="Meu Input">
Exemplo usando ECV Components
const PLACEHOLDER: TextStyle = {
color: MaterialColors.blue[500],
size: "25px",
fontStyle: "italic",
}
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${{width: "200px"}}>
<ecv-text-field hint="meu Input" .hintSyle=${PLACEHOLDER}></ecv-text-field>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Inserindo Label
Para adicionar o label, precisa chamar a propriedade label, já para estilizar o mesmo, precisa da propriedade labelStyle, que espera receber um objeto do tipo TextFieldStyle.
Exemplo usando HTML
<style>
input{
width: 200px;
}
label{
font-size: 20px;
color: #2196F3;
}
</style>
<label for="meuLabel">Meu Label</label>
<input type="text" name="meuLabel" />
Exemplo usando ECV Components
const MEU__LABEL: TextStyle = {
size: "20px",
color: MaterialColors.blue[500],
}
render(): TemplateResult{
return html`
<ecv-box-decoration .decoration=${{width: "200px"}}>
<ecv-text-field label="Meu Label" .labelStyle=${MEU__LABEL}></ecv-text-field>
</ecv-box-decoration>
`;
}
Resultado do código acima:
Utilizando o Switch
O Switch é um toggle, basicamente liga ou desliga, para utiliza-lo, precisa chamar o componente ECV Switch.
Exemplo usando HTML
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-switch></ecv-switch>
`;
}
Resultado do código acima:
Como deixar com CHECKED
Para deixar com checked, precisa chamar a propriedade checked do tipo Boolean, por padrão é false.
Exemplo usando HTML
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-switch ?checked=${true}></ecv-switch>
`;
}
Resultado do código acima:
Alterando o tamanho
Para alterar o tamanho, precisa chamar a propriedade size, que espera receber um Enum do tipo InputFieldSize, por padrão é InputFieldSize.NORMAL.
Exemplo usando HTML
<style>
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 30px;
width: 30px;
left: 23px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Exemplo usando ECV Components
render(): TemplateResult{
return html`
<ecv-switch ?checked=${true} .size=${InputFieldSize.BIG}></ecv-switch>
`;
}
Resultado do código acima:
Estilizando
Para estilizar o componente, precisa chamar as propriedades do ECV Switch de acordo com a necessidade das alterações.
Exemplo usando HTML
<style>
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 30px;
width: 30px;
left: 23px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
Exemplo usando ECV Components
O sliderColor espera receber um Enum do tipo MaterialColors
render(): TemplateResult{
return html`
<ecv-switch checkedColor="black" sliderColor=${MaterialColors.blue[500]}></ecv-switch>
`;
}
Resultado do código acima:
Verificando o estado
Para verificar o estado, precisa chamar a propriedade onChecked, que espera receber uma função.
Exemplo usando HTML
<style>
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 32px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 30px;
width: 30px;
left: 23px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" id="meuInput" >
<span class="slider round"></span>
</label>
<script>
let meuSwitch = document.querySelector("#meuInput");
meuSwitch.addEventListener("change", (event) => {
console.log(event.target.checked);
});
</script>
Exemplo usando ECV Components
estadoSwitch(event: ECVSwitch){
console.log(event.checked);
}
render(): TemplateResult{
return html`
<ecv-switch .onChecked=${(event: ECVSwitch) => {this.estadoSwitch(event)}} ?checked=${true}></ecv-switch>
`;
}
Resultado do código acima:
✅ Uso com React + TypeScript
🚀 Instale o @lit/react (Recomendado)
O time do Lit desenvolveu um pacote oficial chamado @lit/react para facilitar a integração de componentes Lit com React.
Ele fornece um utilitário que gera um "wrapper" (invólucro) React para o seu componente Lit.
npm install @lit/react
# ou
yarn add @lit/react
✅ Como usar:
1️⃣ Crie seu componente LitElement
Exemplo: my-element.ts
// my-element.ts
import { LitElement, html, css, CSSResultGroup, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
@property({ type: String })
name: string = 'Mundo';
static styles: CSSResultGroup = css`
:host {
display: block;
padding: 16px;
background-color: lightblue;
border-radius: 8px;
}
`;
protected render(): TemplateResult {
return html`<p>Olá, ${this.name}!</p>`;
}
}
2️⃣ Crie um wrapper React para ele
Exemplo: MyElementComponent.tsx
// MyElementComponent.tsx
import * as React from 'react';
import { createComponent } from '@lit/react';
import { MyElement } from './my-element';
export const MyElementComponent = createComponent(React, 'my-element', MyElement, {
// Opcional: mapeie eventos personalizados do Lit para props de evento do React
// onMyCustomEvent: 'my-custom-event',
});
3️⃣ Use o componente React gerado normalmente
// App.tsx
import React, { useState } from 'react';
import { MyElementComponent } from './MyElementComponent';
function App(): JSX.Element {
const [userName, setUserName] = useState('Usuário React');
return (
<div>
<h1>Aplicação React com Lit Element</h1>
<MyElementComponent name={userName} />
<button onClick={() => setUserName('Novo Nome')}>
Alterar Nome no Lit Component
</button>
</div>
);
}
export default App;
✅ Por que usar @lit/react?
- ✅ Facilita a tipagem e integração com React + TypeScript.
- ✅ Permite mapear eventos personalizados (CustomEvent) como props de evento React.
- ✅ Elimina a necessidade de mexer diretamente em
JSX.IntrinsicElements.
❓ E se eu não quiser usar @lit/react?
Você pode usar diretamente o Web Component no JSX, mas precisará ajustar o TypeScript adicionando no seu projeto um arquivo global.d.ts com:
declare namespace JSX {
interface IntrinsicElements {
'my-element': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
}
}
✅ Recomendamos o uso do @lit/react para maior compatibilidade e ergonomia!