CategoriesHighlight - Yampi Developer Portal

O componente CategoriesHighlight busca as categorias pelos IDs informados e as exibe com imagem de capa e nome. Em mobile, o layout pode ser carrossel ou grade; em desktop, exibe grade fixa. Categorias sem imagem de capa usam um placeholder automaticamente.

Uso

<categories-highlight
  title="Nossas categorias"
  :categories-ids="{{ section.categoriesIds | json_encode }}"
  :show-categories-names="true"
  mobile-layout="grid"
/>

Propriedades

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`categoriesIds`	`Array`	❌	`[]`	Lista de IDs das categorias a serem exibidas.
`title`	`String`	❌	`''`	Título exibido acima das categorias. No editor, exibe um texto de preview quando vazio.
`showCategoriesNames`	`Boolean`	❌	`true`	Exibe ou oculta o nome das categorias abaixo das imagens.
`mobileLayout`	`String`	❌	`'carousel'`	Layout em dispositivos móveis. Valores: `'carousel'` ou `'grid'`.

Mixins utilizados

Mixin	Finalidade
`mobileMixin`	Detecção de dispositivo para controle de layout e carrossel.

⌘I