Grid - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`products`	`Array`	❌	`[]`	Lista de objetos de produto a exibir.
`title`	`String`	❌	`''`	Título exibido acima da grade.
`carousel`	`Boolean`	❌	`false`	Exibe os produtos em carrossel em vez de grade fixa.
`productsPerLine`	`Number`	❌	`2`	Colunas por linha no mobile. Valores: `1` ou `2`.
`loading`	`Boolean`	❌	`false`	Exibe skeletons no lugar dos produtos enquanto carrega.
`link`	`String`	❌	`null`	URL para exibir o link “Ver todos” abaixo da grade.
`showLink`	`Boolean`	❌	`false`	Controla a exibição do link em mobile.

Slots

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

⌘I