Skip to main content
Componente de layout para exibição de produtos em grade ou carrossel. Expõe cada produto via slot com escopo, permitindo customizar o card de produto renderizado.

​
Uso

<Grid
  :products="products"
  title="Produtos em destaque"
  :products-per-line="2"
  :carousel="false"
  :loading="isLoading"
>
  <template v-slot="{ product }">
    <ProductCard :product="product" />
  </template>
</Grid>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
productsArray❌[]Lista de objetos de produto a exibir.
titleString❌''Título exibido acima da grade.
carouselBoolean❌falseExibe os produtos em carrossel em vez de grade fixa.
productsPerLineNumber❌2Colunas por linha no mobile. Valores: 1 ou 2.
loadingBoolean❌falseExibe skeletons no lugar dos produtos enquanto carrega.
linkString❌nullURL para exibir o link “Ver todos” abaixo da grade.
showLinkBoolean❌falseControla a exibição do link em mobile.

​
Slots

SlotEscopoDescrição
default{ product }Renderiza cada produto. O objeto product contém todos os dados do produto.