Todos os componentes · Categoria: Conteúdo e utilidades

Progresso de leitura

Um artigo com barra de leitura e botão de voltar ao topo dentro da caixa.

Um artigo numa caixa que rola sozinha, com uma barra que enche conforme você lê, uma estimativa do tempo de leitura e um botão que leva você ao topo da caixa. A página nunca é rolada e a caixa responde ao teclado.

Experimente

<reading-progress>

VisãoPréviaCódigoCSS

How a page earns attention

1 min readSample content

A page has a few seconds to say what it is for. Start with the answer, then give the reasons.

Short paragraphs are easier to scan. Each one should carry a single idea, and the first sentence should say which.

Headings are signposts, not decoration. Write them so that someone who reads only the headings still knows the story.

Numbers need context. Say what was measured, over which period, and how, or leave the number out.

Images and motion should earn their place. If removing one does not change what the reader learns, remove it.

Finish with the next step. A reader who got this far deserves a clear, single thing to do.

Test the page on a small screen first. What survives there is usually what mattered.

Read it aloud once. Where you stumble, the reader will too.

reading-progress: Um artigo com barra de leitura e botão de voltar ao topo dentro da caixa. 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

<reading-progress locale="en"></reading-progress>

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

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

ReadingProgress.tsx

import { useEffect, useRef } from "react";

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

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

  return <reading-progress 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.

ReadingProgress.tsx

import { useEffect, useRef } from "react";

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

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

  return <reading-progress 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/ReadingProgress.vue

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

<template>
  <reading-progress locale="en" @reading-progress:finished="onFinished" />
</template>

vite.config.ts

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

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

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/reading-progress.component.ts

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

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

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

<reading-progress locale="en" onreading-progress:finished={onFinished}></reading-progress>

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

reading-progress {
  --rp-radius: 16px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
heading	string	nenhum	Replaces the article title.
paragraphs	list	nenhum	The article's paragraphs.
height	number 10 to 40	18	Height of the reading box, in em.
hideSample	boolean	false	Hides the Sample content mark (use your own article).
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
finished	The reader reached the end of the article.

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 "Progresso de leitura" (reading-progress): Um artigo com barra de leitura e botão de voltar ao topo dentro da caixa. 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

História ao rolar<scroll-story>
Linha do tempo que se desenha<timeline-draw>