Todos os componentes · Categoria: Preços e contadores

Contador de números

Números grandes que rolam quando entram na tela.

Valores que rolam dígito a dígito, da direita para a esquerda, na primeira vez que aparecem na tela, e nunca mais. Valores, rótulos e unidades vêm por props. Sem movimento, ou sem observador no navegador, os números finais já estão lá, e cada um é lido inteiro por leitores de tela.

Experimente

<stat-counter>

VisãoPréviaCódigoCSS

stat-counter: Números grandes que rolam quando entram na tela. 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

<stat-counter
  still
  locale="en"
  stats="[{&quot;value&quot;:100,&quot;label&quot;:&quot;Sites on the Agency plan&quot;},{&quot;value&quot;:24,&quot;label&quot;:&quot;Months of history on Pro&quot;},{&quot;value&quot;:14,&quot;label&quot;:&quot;Grace days past a limit&quot;}]"
></stat-counter>

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

taggor-component.js

const element = document.createElement("stat-counter");
element.setAttribute("still", "");
element.setAttribute("locale", "en");
element.stats = [
  {
    "value": 100,
    "label": "Sites on the Agency plan"
  },
  {
    "value": 24,
    "label": "Months of history on Pro"
  },
  {
    "value": 14,
    "label": "Grace days past a limit"
  }
];
document.body.append(element);

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
Listas e objetos entram como propriedade do elemento, não como atributo.

StatCounter.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      stats: [
        {
          "value": 100,
          "label": "Sites on the Agency plan"
        },
        {
          "value": 24,
          "label": "Months of history on Pro"
        },
        {
          "value": 14,
          "label": "Grace days past a limit"
        }
      ],
    });
  }, []);

  return <stat-counter ref={ref} still="" 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.
Listas e objetos entram como propriedade do elemento, não como atributo.

StatCounter.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      stats: [
        {
          "value": 100,
          "label": "Sites on the Agency plan"
        },
        {
          "value": 24,
          "label": "Months of history on Pro"
        },
        {
          "value": 14,
          "label": "Grace days past a limit"
        }
      ],
    });
  }, []);

  return <stat-counter ref={ref} still 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.
Listas e objetos entram como propriedade do elemento, não como atributo.

src/StatCounter.vue

<template>
  <stat-counter
    :still.prop="true"
    locale="en"
    :stats.prop="[{&quot;value&quot;:100,&quot;label&quot;:&quot;Sites on the Agency plan&quot;},{&quot;value&quot;:24,&quot;label&quot;:&quot;Months of history on Pro&quot;},{&quot;value&quot;:14,&quot;label&quot;:&quot;Grace days past a limit&quot;}]"
  />
</template>

vite.config.ts

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

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

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.
Listas e objetos entram como propriedade do elemento, não como atributo.

src/app/stat-counter.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-stat-counter",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <stat-counter [still]="true" locale="en" [stats]="values.stats"></stat-counter>
  `,
})
export class StatCounterComponent {
  readonly values = {
    stats: [
      {
        "value": 100,
        "label": "Sites on the Agency plan"
      },
      {
        "value": 24,
        "label": "Months of history on Pro"
      },
      {
        "value": 14,
        "label": "Grace days past a limit"
      }
    ],
  };
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
Listas e objetos entram como propriedade do elemento, não como atributo.

src/TaggorComponent.svelte

<stat-counter
  still
  locale="en"
  stats={[
    {
      "value": 100,
      "label": "Sites on the Agency plan"
    },
    {
      "value": 24,
      "label": "Months of history on Pro"
    },
    {
      "value": 14,
      "label": "Grace days past a limit"
    }
  ]}
></stat-counter>

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

stat-counter {
  --sc-radius: 18px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
stats	list	nenhum	The numbers: a value, a label, an optional prefix and suffix and decimals.
still	boolean	false	Shows the final numbers at once and never rolls (static previews).
hideSample	boolean	false	Hides the Sample content mark (use it with your own numbers).
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

Este componente não dispara evento.

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 "Contador de números" (stat-counter): Números grandes que rolam quando entram na tela. 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

Alternador de preços<pricing-toggle>
Contagem para o lançamento<launch-countdown>
Check de sucesso<success-check>