Todos os componentes · Categoria: Galerias e mídia

Masonry com filtros

Uma grade masonry de blocos com chips de filtro.

Blocos de alturas diferentes bem encaixados numa grade feita só de CSS, com chips que filtram por tag e uma contagem que diz quantos aparecem. Os blocos são padrões geométricos desenhados em código e vêm por props.

Experimente

<masonry-filter>

VisãoPréviaCódigoCSS

masonry-filter: Uma grade masonry de blocos com chips de filtro. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

index.html

<masonry-filter locale="en"></masonry-filter>

<script>
  const element = document.querySelector("masonry-filter");
  element.addEventListener("masonry-filter:filter", (event) => {
    console.log(event.detail);
  });
</script>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

const element = document.createElement("masonry-filter");
element.setAttribute("locale", "en");
element.addEventListener("masonry-filter:filter", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

MasonryFilter.tsx

import { useEffect, useRef } from "react";

export function MasonryFilter() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFilter = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("masonry-filter:filter", onFilter);
    return () => {
      element.removeEventListener("masonry-filter:filter", onFilter);
    };
  }, []);

  return <masonry-filter ref={ref} locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 18 manda toda prop de um custom element como atributo de texto.
O evento é ouvido com addEventListener, dentro de um efeito.

MasonryFilter.tsx

import { useEffect, useRef } from "react";

export function MasonryFilter() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFilter = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("masonry-filter:filter", onFilter);
    return () => {
      element.removeEventListener("masonry-filter:filter", onFilter);
    };
  }, []);

  return <masonry-filter ref={ref} locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.
O evento é ouvido com addEventListener, dentro de um efeito.

src/MasonryFilter.vue

<script setup lang="ts">
function onFilter(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <masonry-filter locale="en" @masonry-filter:filter="onFilter" />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "masonry-filter",
        },
      },
    }),
  ],
});

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.

src/app/masonry-filter.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-masonry-filter",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <masonry-filter locale="en"></masonry-filter>
  `,
})
export class MasonryFilterComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("masonry-filter");
    const onFilter = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("masonry-filter:filter", onFilter));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("masonry-filter:filter", onFilter));
  }
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

<script>
  function onFilter(event) {
    console.log(event.detail);
  }
</script>

<masonry-filter locale="en" onmasonry-filter:filter={onFilter}></masonry-filter>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

masonry-filter {
  --mf-radius: 16px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
tiles	list	nenhum	The tiles: a title, a pattern (rings, stripes, triangles, dots, waves), a hue, a height of 1 to 3 rows and a filter tag.
hideSample	boolean	false	Hides the Sample content mark (use it with your own tiles).
locale	pt-BR \| en	en	–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
filter	The visitor chose a filter.

Construa um com o seu agente

Construa para mim um componente do Taggor como "Masonry com filtros" (masonry-filter): Uma grade masonry de blocos com chips de filtro. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

Componentes relacionados

Grade com lightbox<lightbox-grid>
Mural de polaroids<polaroid-wall>
Imagem com pontos<hotspot-image>