Todos os componentes · Categoria: Carregamento e feedback

Check de sucesso

Um check que se desenha sozinho, com uma chuva de confete.

Um selo cujo check se desenha sozinho, com uma pequena explosão de confete feita em SVG. Um botão toca a animação, ou a página muda o estado. Com movimento reduzido, o check simplesmente aparece.

Experimente

<success-check>

VisãoPréviaCódigoCSS

success-check: Um check que se desenha sozinho, com uma chuva de confete. 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

<success-check state="success" locale="en"></success-check>

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

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

SuccessCheck.tsx

import { useEffect, useRef } from "react";

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

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

  return <success-check ref={ref} state="success" 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.

SuccessCheck.tsx

import { useEffect, useRef } from "react";

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

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

  return <success-check ref={ref} state="success" 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/SuccessCheck.vue

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

<template>
  <success-check
    state="success"
    locale="en"
    @success-check:success="onSuccess"
  />
</template>

vite.config.ts

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

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

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/success-check.component.ts

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

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

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

<success-check state="success" locale="en" onsuccess-check:success={onSuccess}></success-check>

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

success-check {
  --sc-radius: 20px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
state	idle \| success	idle	Set to success to draw the check; back to idle to reset it.
headline	string	nenhum	Replaces the success headline.
message	string	nenhum	Replaces the success message.
hideConfetti	boolean	false	Draws the check alone, with no confetti.
pieces	number 6 to 32	16	How many confetti pieces.
hideButton	boolean	false	Hides the button; the page drives it by state.
accent	color	nenhum	Badge color; wins over the --sc-accent variable.
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
success	The check started to draw.

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 "Check de sucesso" (success-check): Um check que se desenha sozinho, com uma chuva de confete. 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

Coleta de opinião<feedback-collector>
Contagem para o lançamento<launch-countdown>
Enquete rápida<quick-poll>