Todos os componentes · Categoria: Heróis e botões

Herói com palavra que gira

Um título cuja palavra-chave troca dentro de uma pílula destacada.

A palavra sobe de baixo enquanto a anterior sai. Para quando o ponteiro está em cima ou o foco está dentro, e há sempre um botão de pausa. Com movimento reduzido mostra a primeira palavra e fica parado.

Experimente

<hero-word-rotator>

VisãoPréviaCódigoCSS

hero-word-rotator: Um título cuja palavra-chave troca dentro de uma pílula destacada. 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

<hero-word-rotator locale="en"></hero-word-rotator>

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

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

HeroWordRotator.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onClicked = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("hero-word-rotator:clicked", onClicked);
    return () => {
      element.removeEventListener("hero-word-rotator:clicked", onClicked);
    };
  }, []);

  return <hero-word-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.

HeroWordRotator.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onClicked = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("hero-word-rotator:clicked", onClicked);
    return () => {
      element.removeEventListener("hero-word-rotator:clicked", onClicked);
    };
  }, []);

  return <hero-word-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/HeroWordRotator.vue

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

<template>
  <hero-word-rotator locale="en" @hero-word-rotator:clicked="onClicked" />
</template>

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "hero-word-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/hero-word-rotator.component.ts

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

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

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

<hero-word-rotator locale="en" onhero-word-rotator:clicked={onClicked}></hero-word-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 publish

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

styles.css

hero-word-rotator {
  --hw-radius: 20px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
intro	string	nenhum	The text before the word; the language's own when empty.
words	string	nenhum	Two to five words separated by \|; the language's own when empty.
outro	string	nenhum	The text after the word.
sub	string	nenhum	The line under the headline.
cta	string	nenhum	The button label.
href	url	nenhum	Where the button goes.
interval	number 1500 to 8000	2400	Milliseconds a word stays.
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
clicked	The button was pressed.

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 "Herói com palavra que gira" (hero-word-rotator): Um título cuja palavra-chave troca dentro de uma pílula destacada. 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

Herói com esferas de luz<hero-orbs>
Botão magnético<button-magnetic>
Herói dividido com formulário<hero-split-form>