LeonardoPereiraRocha/challenge-vtex-io-leonardo-pereira-rocha
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity
8c81925dca
challenge-vtex-io-leonardo-.../react/components/Html/readme.md

1.6 KiB
Raw Blame History

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: 44%;">
                    {children}
                </div>
            </div>
        </section>
    </div>