Todos os componentes · Categoria: Visual

Contagem para o lançamento

Conte até uma data e depois mostre uma mensagem ou um botão.

Uma data, uma hora e um fuso, com um modo de lançamento e um estado final à sua escolha. É um cronômetro com texto alternativo para leitores de tela.

Experimente

<launch-countdown>

VisãoPréviaCódigoCSS

launch-countdown: Conte até uma data e depois mostre uma mensagem ou um botão. 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

<launch-countdown locale="en"></launch-countdown>

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

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

LaunchCountdown.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinish = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:finish", onFinish);
    const onCta = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:cta", onCta);
    return () => {
      element.removeEventListener("launch-countdown:finish", onFinish);
      element.removeEventListener("launch-countdown:cta", onCta);
    };
  }, []);

  return <launch-countdown 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.

LaunchCountdown.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onFinish = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:finish", onFinish);
    const onCta = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("launch-countdown:cta", onCta);
    return () => {
      element.removeEventListener("launch-countdown:finish", onFinish);
      element.removeEventListener("launch-countdown:cta", onCta);
    };
  }, []);

  return <launch-countdown 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/LaunchCountdown.vue

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

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

<template>
  <launch-countdown
    locale="en"
    @launch-countdown:finish="onFinish"
    @launch-countdown:cta="onCta"
  />
</template>

vite.config.ts

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

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

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/launch-countdown.component.ts

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

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

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

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

<launch-countdown
  locale="en"
  onlaunch-countdown:finish={onFinish}
  onlaunch-countdown:cta={onCta}
></launch-countdown>

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

launch-countdown {
  --cd-radius: 16px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
headline	string	nenhum	Replaces the default heading.
date	date	2030-01-01	The day it ends, as YYYY-MM-DD.
time	string	09:00	The time of day it ends, as HH:MM (24 hours).
timeZone	UTC \| visitor \| America/Sao_Paulo \| America/New_York \| America/Los_Angeles \| Europe/London \| Europe/Berlin \| Asia/Kolkata \| Asia/Tokyo \| Australia/Sydney	UTC	The time zone of the date and time; visitor uses each visitor's own clock.
mode	standard \| launch	standard	Launch adds the launch badge and the date line.
endState	message \| zeros \| hide	message	What shows when the time is up: a message, the zeros, or nothing.
endMessage	string	nenhum	Replaces the default end message.
endLabel	string	nenhum	Text of the end button; shown only with endUrl.
endUrl	url	nenhum	https link of the end button, for example the launch page.
hideSeconds	boolean	false	Counts down to the minute, with no seconds.
accent	color	nenhum	Accent color; wins over the --cd-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
finish	The time is up: reached while the page was open, or already past on arrival.
cta	The visitor pressed the end button.

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 "Contagem para o lançamento" (launch-countdown): Conte até uma data e depois mostre uma mensagem ou um botão. 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

Escolha de horário<booking-picker>
Carrossel de cartões<card-carousel>
Preferências da newsletter<newsletter-preferences>