Todos os componentes · Categoria: Carrosséis e vitrines

Fluxo de capas

Uma fileira de capas em profundidade, em que a escolhida fica de frente.

A capa escolhida fica de frente e as outras viram na direção dela, em profundidade, tudo em CSS puro, sem canvas nem WebGL. Clique numa capa do lado, use as setas ou os botões. As capas são arte desenhada em código, com títulos inventados.

Experimente

<coverflow-3d>

VisãoPréviaCódigoCSS

coverflow-3d: Uma fileira de capas em profundidade, em que a escolhida fica de frente. 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

<coverflow-3d locale="en"></coverflow-3d>

<script>
  const element = document.querySelector("coverflow-3d");
  element.addEventListener("coverflow-3d:selected", (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("coverflow-3d");
element.setAttribute("locale", "en");
element.addEventListener("coverflow-3d:selected", (event) => {
  console.log(event.detail);
});
document.body.append(element);

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

Coverflow3d.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onSelected = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("coverflow-3d:selected", onSelected);
    return () => {
      element.removeEventListener("coverflow-3d:selected", onSelected);
    };
  }, []);

  return <coverflow-3d 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.

Coverflow3d.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onSelected = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("coverflow-3d:selected", onSelected);
    return () => {
      element.removeEventListener("coverflow-3d:selected", onSelected);
    };
  }, []);

  return <coverflow-3d 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/Coverflow3d.vue

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";

const element = ref<HTMLElement | null>(null);

function onSelected(event: Event) {
  console.log((event as CustomEvent).detail);
}

onMounted(() => {
  element.value?.addEventListener("coverflow-3d:selected", onSelected);
});

onBeforeUnmount(() => {
  element.value?.removeEventListener("coverflow-3d:selected", onSelected);
});
</script>

<template>
  <coverflow-3d ref="element" locale="en" />
</template>

vite.config.ts

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

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

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.
O evento é ouvido com addEventListener, dentro de um efeito.

src/app/coverflow-3d.component.ts

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

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

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 onSelected(event) {
    console.log(event.detail);
  }
</script>

<coverflow-3d locale="en" oncoverflow-3d:selected={onSelected}></coverflow-3d>

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

coverflow-3d {
  --cf-radius: 20px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
covers	string	nenhum	Three to seven titles separated by \|; the invented ones when empty.
selected	number 0 to 6	2	The selected cover, from 0.
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
selected	A cover was selected.

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Fluxo de capas" (coverflow-3d): Uma fileira de capas em profundidade, em que a escolhida fica de frente. 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

Carrossel de cartões<card-carousel>
Pilha de cartões para arremessar<card-stack-swipe>
Carrossel de avaliações<review-carousel>