Todos os componentes · Categoria: Profundidade e camadas
Cubo giratório
Recursos nas faces de um cubo que gira, com controle de pausa.
Recursos nas faces de um prisma que gira em profundidade CSS, com anterior, próximo, pausa e um botão por face. Para enquanto o ponteiro ou o foco estão dentro dele e enquanto ele está fora da tela, e com movimento reduzido nunca gira sozinho.
01
Experimente
Props
Gerado a partir do manifesto do componente e dos valores acima.
index.html
<cube-rotator locale="en"></cube-rotator>
<script>
const element = document.querySelector("cube-rotator");
element.addEventListener("cube-rotator:turn", (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("cube-rotator");
element.setAttribute("locale", "en");
element.addEventListener("cube-rotator:turn", (event) => {
console.log(event.detail);
});
document.body.append(element);
- Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
CubeRotator.tsx
import { useEffect, useRef } from "react";
export function CubeRotator() {
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const element = ref.current;
if (!element) return;
const onTurn = (event: Event) => {
console.log((event as CustomEvent).detail);
};
element.addEventListener("cube-rotator:turn", onTurn);
return () => {
element.removeEventListener("cube-rotator:turn", onTurn);
};
}, []);
return <cube-rotator 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.
CubeRotator.tsx
import { useEffect, useRef } from "react";
export function CubeRotator() {
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const element = ref.current;
if (!element) return;
const onTurn = (event: Event) => {
console.log((event as CustomEvent).detail);
};
element.addEventListener("cube-rotator:turn", onTurn);
return () => {
element.removeEventListener("cube-rotator:turn", onTurn);
};
}, []);
return <cube-rotator 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/CubeRotator.vue
<script setup lang="ts">
function onTurn(event: Event) {
console.log((event as CustomEvent).detail);
}
</script>
<template>
<cube-rotator locale="en" @cube-rotator:turn="onTurn" />
</template>
vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === "cube-rotator",
},
},
}),
],
});
- 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/cube-rotator.component.ts
import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";
@Component({
selector: "app-cube-rotator",
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<cube-rotator locale="en"></cube-rotator>
`,
})
export class CubeRotatorComponent {
constructor() {
const host = inject<ElementRef<HTMLElement>>(ElementRef);
const element = () => host.nativeElement.querySelector("cube-rotator");
const onTurn = (event: Event) => {
console.log((event as CustomEvent).detail);
};
afterNextRender(() => element()?.addEventListener("cube-rotator:turn", onTurn));
inject(DestroyRef).onDestroy(() => element()?.removeEventListener("cube-rotator:turn", onTurn));
}
}
- 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 onTurn(event) {
console.log(event.detail);
}
</script>
<cube-rotator locale="en" oncube-rotator:turn={onTurn}></cube-rotator>
- 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 publishAs variáveis CSS que o componente expõe, definidas como a página de um cliente faria.
styles.css
cube-rotator {
--cr-radius: 16px;
}02
Props
| Prop | Tipo | Padrão | O que faz |
|---|---|---|---|
| features | list | nenhum | One face each: a title and a short text (3 to 6 faces). |
| interval | number 2 to 12 | 4 | Seconds each face stays. |
| paused | boolean | false | Starts paused. |
| 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.
03
Eventos
| Evento | Quando dispara |
|---|---|
| turn | A face came to the front. |
04
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 "Cubo giratório" (cube-rotator): Recursos nas faces de um cubo que gira, com controle de pausa.
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.
05
Componentes relacionados
- Cartão de produto que vira<card-flip-3d>
- Carrossel de cartões<card-carousel>