HTML
Descrição
Uma componente que permite que possamos adicionar tags html direto do JSON. Para podermos estar estruturando o projeto de nossa maneira.
Basicamente esse componente
Característica
- ✔ Compatível com CSS Handles
- ✔ Menos linha de código renderizada no HTML em comparado ao Flex.layout
- ✔ Tag HTML dinâmica para cada caso. Podendo adicionar semântica
- ✔ Possibilidade adicionar Textos
Estrutura
<{qualquerTagHtml} class="{acountName}-{appName}-1-x-html {acountName}-{appName}-new-theme-1-x-html--{suaBlockClass} {qualquer classe extra }">
{children}
</{qualquerTagHtml}>
Propriedades
| Propriedade |
Tipo |
Descrição |
Padrão |
tag |
string |
Tag HTML que será renderizada |
div |
blockClass |
string |
Classe CSS que será adicionada no componente |
`` |
text |
string |
Texto que será renderizado |
'' |
testId |
string |
Id para testes |
'' |
tachyonsClasses |
string |
Classe tachyons que será adicionada no componente |
'' |
HTML vs FLEX.LAYOUT
html
<div class="ckm3sintese-ckm3sintese-new-theme-1-x-html">
{children}
<div>
flex
<div class="vtex-flex-layout-0-x-flexRow">
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
<div class="vtex-flex-layout-0-x-flexRowContent pr7">
<div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;">
{children}
</div>
</div>
</section>
</div>
