forked from M3-Academy/challenge-vtex-io
56 lines
1.6 KiB
Markdown
56 lines
1.6 KiB
Markdown
# 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
|
|
```html
|
|
<{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
|
|
```html
|
|
<div class="ckm3sintese-ckm3sintese-new-theme-1-x-html">
|
|
{children}
|
|
<div>
|
|
```
|
|
|
|
### flex
|
|
```html
|
|
<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>
|
|
```
|