Todos os componentes · Categoria: Preços e contadores

Alternador de preços

Planos mensais e anuais com preços que rolam como um odômetro.

Cartões de planos sob uma chave: vire e cada preço rola dígito a dígito para o outro período, com a economia calculada dos seus próprios números. Os planos, os preços e os limites vêm todos por props, então a página decide cada valor. Não há etapa de pagamento, e escolher um plano só avisa a sua página.

Experimente

<pricing-toggle>

VisãoPréviaCódigoCSS

MonthlyYearlySave up to 16%

Free

a month

Month to month

3 sites
10K renders a month
250 MB of storage

Our pick

Pro

a month

Month to month

$140 for the year

25 sites
1.25M renders a month
3 GB of storage

Agency

a month

Month to month

$490 for the year

100 sites
4M renders a month
50 GB of storage

pricing-toggle: Planos mensais e anuais com preços que rolam como um odômetro. 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

<pricing-toggle
  currency="$"
  period="yearly"
  locale="en"
  plans="[{&quot;name&quot;:&quot;Free&quot;,&quot;monthly&quot;:0,&quot;yearly&quot;:0,&quot;limits&quot;:&quot;3 sites;10K renders a month;250 MB of storage&quot;,&quot;featured&quot;:false},{&quot;name&quot;:&quot;Pro&quot;,&quot;monthly&quot;:14,&quot;yearly&quot;:140,&quot;limits&quot;:&quot;25 sites;1.25M renders a month;3 GB of storage&quot;,&quot;featured&quot;:true},{&quot;name&quot;:&quot;Agency&quot;,&quot;monthly&quot;:49,&quot;yearly&quot;:490,&quot;limits&quot;:&quot;100 sites;4M renders a month;50 GB of storage&quot;,&quot;featured&quot;:false}]"
></pricing-toggle>

<script>
  const element = document.querySelector("pricing-toggle");
  element.addEventListener("pricing-toggle:period", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("pricing-toggle:pick", (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("pricing-toggle");
element.setAttribute("currency", "$");
element.setAttribute("period", "yearly");
element.setAttribute("locale", "en");
element.plans = [
  {
    "name": "Free",
    "monthly": 0,
    "yearly": 0,
    "limits": "3 sites;10K renders a month;250 MB of storage",
    "featured": false
  },
  {
    "name": "Pro",
    "monthly": 14,
    "yearly": 140,
    "limits": "25 sites;1.25M renders a month;3 GB of storage",
    "featured": true
  },
  {
    "name": "Agency",
    "monthly": 49,
    "yearly": 490,
    "limits": "100 sites;4M renders a month;50 GB of storage",
    "featured": false
  }
];
element.addEventListener("pricing-toggle:period", (event) => {
  console.log(event.detail);
});
element.addEventListener("pricing-toggle:pick", (event) => {
  console.log(event.detail);
});
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.

PricingToggle.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      plans: [
        {
          "name": "Free",
          "monthly": 0,
          "yearly": 0,
          "limits": "3 sites;10K renders a month;250 MB of storage",
          "featured": false
        },
        {
          "name": "Pro",
          "monthly": 14,
          "yearly": 140,
          "limits": "25 sites;1.25M renders a month;3 GB of storage",
          "featured": true
        },
        {
          "name": "Agency",
          "monthly": 49,
          "yearly": 490,
          "limits": "100 sites;4M renders a month;50 GB of storage",
          "featured": false
        }
      ],
    });
    const onPeriod = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("pricing-toggle:period", onPeriod);
    const onPick = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("pricing-toggle:pick", onPick);
    return () => {
      element.removeEventListener("pricing-toggle:period", onPeriod);
      element.removeEventListener("pricing-toggle:pick", onPick);
    };
  }, []);

  return <pricing-toggle ref={ref} currency={"$"} period="yearly" 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.
O evento é ouvido com addEventListener, dentro de um efeito.

PricingToggle.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      plans: [
        {
          "name": "Free",
          "monthly": 0,
          "yearly": 0,
          "limits": "3 sites;10K renders a month;250 MB of storage",
          "featured": false
        },
        {
          "name": "Pro",
          "monthly": 14,
          "yearly": 140,
          "limits": "25 sites;1.25M renders a month;3 GB of storage",
          "featured": true
        },
        {
          "name": "Agency",
          "monthly": 49,
          "yearly": 490,
          "limits": "100 sites;4M renders a month;50 GB of storage",
          "featured": false
        }
      ],
    });
    const onPeriod = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("pricing-toggle:period", onPeriod);
    const onPick = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("pricing-toggle:pick", onPick);
    return () => {
      element.removeEventListener("pricing-toggle:period", onPeriod);
      element.removeEventListener("pricing-toggle:pick", onPick);
    };
  }, []);

  return <pricing-toggle ref={ref} currency={"$"} period="yearly" 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.
O evento é ouvido com addEventListener, dentro de um efeito.

src/PricingToggle.vue

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

function onPick(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <pricing-toggle
    currency="$"
    period="yearly"
    locale="en"
    :plans.prop="[{&quot;name&quot;:&quot;Free&quot;,&quot;monthly&quot;:0,&quot;yearly&quot;:0,&quot;limits&quot;:&quot;3 sites;10K renders a month;250 MB of storage&quot;,&quot;featured&quot;:false},{&quot;name&quot;:&quot;Pro&quot;,&quot;monthly&quot;:14,&quot;yearly&quot;:140,&quot;limits&quot;:&quot;25 sites;1.25M renders a month;3 GB of storage&quot;,&quot;featured&quot;:true},{&quot;name&quot;:&quot;Agency&quot;,&quot;monthly&quot;:49,&quot;yearly&quot;:490,&quot;limits&quot;:&quot;100 sites;4M renders a month;50 GB of storage&quot;,&quot;featured&quot;:false}]"
    @pricing-toggle:period="onPeriod"
    @pricing-toggle:pick="onPick"
  />
</template>

vite.config.ts

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

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

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/pricing-toggle.component.ts

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

@Component({
  selector: "app-pricing-toggle",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <pricing-toggle
      [currency]="&#39;$&#39;"
      period="yearly"
      locale="en"
      [plans]="values.plans"
    ></pricing-toggle>
  `,
})
export class PricingToggleComponent {
  readonly values = {
    plans: [
      {
        "name": "Free",
        "monthly": 0,
        "yearly": 0,
        "limits": "3 sites;10K renders a month;250 MB of storage",
        "featured": false
      },
      {
        "name": "Pro",
        "monthly": 14,
        "yearly": 140,
        "limits": "25 sites;1.25M renders a month;3 GB of storage",
        "featured": true
      },
      {
        "name": "Agency",
        "monthly": 49,
        "yearly": 490,
        "limits": "100 sites;4M renders a month;50 GB of storage",
        "featured": false
      }
    ],
  };

  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("pricing-toggle");
    const onPeriod = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("pricing-toggle:period", onPeriod));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("pricing-toggle:period", onPeriod));
    const onPick = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("pricing-toggle:pick", onPick));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("pricing-toggle:pick", onPick));
  }
}

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.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

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

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

<pricing-toggle
  currency={"$"}
  period="yearly"
  locale="en"
  plans={[
    {
      "name": "Free",
      "monthly": 0,
      "yearly": 0,
      "limits": "3 sites;10K renders a month;250 MB of storage",
      "featured": false
    },
    {
      "name": "Pro",
      "monthly": 14,
      "yearly": 140,
      "limits": "25 sites;1.25M renders a month;3 GB of storage",
      "featured": true
    },
    {
      "name": "Agency",
      "monthly": 49,
      "yearly": 490,
      "limits": "100 sites;4M renders a month;50 GB of storage",
      "featured": false
    }
  ]}
  onpricing-toggle:period={onPeriod}
  onpricing-toggle:pick={onPick}
></pricing-toggle>

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

pricing-toggle {
  --pt-radius: 18px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
plans	list	nenhum	The plans. Prices are numbers (yearly is the whole year's total); limits are separated by semicolons.
currency	string	$	Symbol before each price.
period	monthly \| yearly	yearly	Which period the switch starts on.
cta	string	nenhum	Replaces the plan button text.
hideSample	boolean	false	Hides the Sample content mark (use it with your own plans).
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
period	The visitor moved the switch.
pick	The visitor chose a plan.

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 "Alternador de preços" (pricing-toggle): Planos mensais e anuais com preços que rolam como um odômetro. 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

Calculadora de plano<plan-calculator>
Configurador de planos<pricing-configurator>
Contador de números<stat-counter>

Alternador de preços

Experimente

Props

Eventos

Construa um com o seu agente

Componentes relacionados

Documentação