Todos os componentes · Categoria: Profundidade e camadas

Cartão de produto que vira

Um cartão de produto que vira para as especificações, com variantes de cor.

Um cartão de produto que gira em profundidade CSS do produto para a ficha técnica, com variantes de cor escolhidas com o mouse ou as setas. A face escondida fica fora do alcance do foco e do leitor de tela. Com movimento reduzido, as faces trocam sem girar.

Experimente

<card-flip-3d>

VisãoPréviaCódigoCSS

card-flip-3d: Um cartão de produto que vira para as especificações, com variantes de cor. 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

<card-flip-3d locale="en"></card-flip-3d>

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

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

CardFlip3d.tsx

import { useEffect, useRef } from "react";

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

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

  return <card-flip-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.

CardFlip3d.tsx

import { useEffect, useRef } from "react";

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

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

  return <card-flip-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/CardFlip3d.vue

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

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

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

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

onMounted(() => {
  element.value?.addEventListener("card-flip-3d:flip", onFlip);
  element.value?.addEventListener("card-flip-3d:variant", onVariant);
});

onBeforeUnmount(() => {
  element.value?.removeEventListener("card-flip-3d:flip", onFlip);
  element.value?.removeEventListener("card-flip-3d:variant", onVariant);
});
</script>

<template>
  <card-flip-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 === "card-flip-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/card-flip-3d.component.ts

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

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

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

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

<card-flip-3d
  locale="en"
  oncard-flip-3d:flip={onFlip}
  oncard-flip-3d:variant={onVariant}
></card-flip-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

card-flip-3d {
  --cf-radius: 22px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
productName	string	nenhum	Replaces the product name.
tagline	string	nenhum	Replaces the line under the name.
variants	list	nenhum	Colour variants: a name and a CSS colour (hex or name).
specs	list	nenhum	Spec rows on the back of the card.
flipped	boolean	false	Starts on the spec sheet.
hideSample	boolean	false	Hides the Sample content mark (use your own product).
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
flip	The card turned to a side.
variant	The visitor chose a colour variant.

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 "Cartão de produto que vira" (card-flip-3d): Um cartão de produto que vira para as especificações, com variantes de cor. 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

Cartão que inclina<card-tilt>
Cubo giratório<cube-rotator>
Carrossel de cartões<card-carousel>