Grid

Sobre

O componente de grid é uma aplicação para o desenvolvimento do layout em tableless.

Dependências

• prod

  • Descrição: Suporta somente a estrutura de dados recebida da API da Wap.store.

  • Tipo: Object

Instalação

• Instale o app através do seu terminal

npm install @wapstore/we-grid

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/we-grid": "^1.2.1"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de grid pode ser inserido em qualquer lugar da pasta "components" ou "pages". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para um grid com dois banners:

<template>
  <section class="weContainer">
    <article class="weContainer-colStart1|colEnd12|deskColStart1|deskColEnd5 flexMiddle">
      <homeBanner-meio2 id="bannerMeioHome2" />
    </article>
    <article class="weContainer-colStart1|colEnd12|deskColStart6|deskColEnd12 flexMiddle">
      <homeBanner-meio3 id="bannerMeioHome3" />
    </article>
  </section>
</template>
<script>
  ...
</script>
<style>
  ...
</style>

Recursos

Classes

Através das classes aplicadas aos elementos podemos estruturar nosso layout, vejamos as possibilidades:

.weContainer 1.2.1

Responsável por alinhar e limitar o conteúdo ao centro, além de impedir que o mesmo toque a borda do site mantendo sempre um distanciamento mínimo de 15px. Também possui um grid de 12 colunas. Qualquer box inserido dentro desse container, que não contenha nenhuma classe que define suas colunas, ocupará 12 colunas automaticamente. O weContainer possui uma dependência, a variável CSS --weGridWidth, ela é Responsável por controlar o tamanho máximo do grid.

<div class="weContainer">
    <!-- Seu conteúdo -->
</div>

Observação: O weContainer não deve ser aninhado diretamente dentro de outro weContainer.

.weContainer-colStart<num>|colEnd<num> 1.2.1

Responsável por definir as colunas de início e fim, cujas quais o box irá ocupar. As colunas vão de 1 a 12.

<div class="weContainer-colStart1|colEnd12">
  <!-- Seu conteúdo -->
</div>

.weContainer-deskColStart<num>|deskColEnd<num> 1.2.1

Responsável por definir as colunas de início e fim no desktop. As colunas vão de 1 a 12.

<div class="weContainer-deskColStart1|deskColEnd12">
  <!-- Seu conteúdo -->
</div>

.weContainer-autoCol<num> 1.2.1

Responsável por definir a quantidade de colunas na qual o box irá ocupar (máximo 12).

<div class="weContainer-autoCol12">
  <!-- Seu conteúdo -->
</div>

.weContainer-deskAutoCol<num> 1.2.1

Responsável por definir a quantidade de colunas na qual o box irá ocupar no desktop (máximo 12).

<div class="weContainer-deskAutoCol12">
  <!-- Seu conteúdo -->
</div>

.flexContainer 1.2.1

Adiciona display: flex ao container, tornando-o um container flex.

Classes para alinhamento com flex

Existem estilos pré-prontos que permitem o alinhamento do conteúdo de um container, ao utilizá-los em conjunto com uma classe de coluna (weContainer-colStart<num>|colEnd<num>), o container automaticamente se torna um container flex, em caso de qualquer outro container, basta adicionar a classe flexContainer.

flexStart 1.2.1

Alinha conteúdo à esquerda do container.

flexVertStart 1.2.1

Alinha conteúdo ao topo do container.

flexCenter 1.2.1

Alinha conteúdo horizontalmente ao centro do container.

flexMiddle 1.2.1

Alinha conteúdo verticalmente ao centro do container.

flexEnd 1.2.1

Alinha conteúdo à direita do container.

flexVertEnd 1.2.1

Alinha conteúdo na parte inferior do container.

O comportamento das classes pode variar de acordo com a orientação definida ao container na qual foram aplicadas.

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.