Todos os componentes · Categoria: Visual

Perguntas frequentes

Perguntas que abrem e fecham, do jeito acessível.

Uma lista de perguntas e respostas como props, com o padrão de teclado que um acordeão pede e uma opção para manter várias abertas.

Experimente

<faq-accordion>

VisãoPréviaCódigoCSS

faq-accordion: Perguntas que abrem e fecham, do jeito acessível. 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

<faq-accordion
  headline="Questions"
  locale="en"
  items="[{&quot;question&quot;:&quot;Does it slow my page down?&quot;,&quot;answer&quot;:&quot;The loader is async and tiny; nothing blocks your own load.&quot;},{&quot;question&quot;:&quot;Can I go back to an older version?&quot;,&quot;answer&quot;:&quot;Yes. Every version is immutable and a rollback is instant.&quot;},{&quot;question&quot;:&quot;Who owns the data?&quot;,&quot;answer&quot;:&quot;You do, and you can export it as CSV or NDJSON.&quot;}]"
></faq-accordion>

<script>
  const element = document.querySelector("faq-accordion");
  element.addEventListener("faq-accordion:toggle", (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("faq-accordion");
element.setAttribute("headline", "Questions");
element.setAttribute("locale", "en");
element.items = [
  {
    "question": "Does it slow my page down?",
    "answer": "The loader is async and tiny; nothing blocks your own load."
  },
  {
    "question": "Can I go back to an older version?",
    "answer": "Yes. Every version is immutable and a rollback is instant."
  },
  {
    "question": "Who owns the data?",
    "answer": "You do, and you can export it as CSV or NDJSON."
  }
];
element.addEventListener("faq-accordion:toggle", (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.

FaqAccordion.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "question": "Does it slow my page down?",
          "answer": "The loader is async and tiny; nothing blocks your own load."
        },
        {
          "question": "Can I go back to an older version?",
          "answer": "Yes. Every version is immutable and a rollback is instant."
        },
        {
          "question": "Who owns the data?",
          "answer": "You do, and you can export it as CSV or NDJSON."
        }
      ],
    });
    const onToggle = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("faq-accordion:toggle", onToggle);
    return () => {
      element.removeEventListener("faq-accordion:toggle", onToggle);
    };
  }, []);

  return <faq-accordion ref={ref} headline="Questions" 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.

FaqAccordion.tsx

import { useEffect, useRef } from "react";

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

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    Object.assign(element, {
      items: [
        {
          "question": "Does it slow my page down?",
          "answer": "The loader is async and tiny; nothing blocks your own load."
        },
        {
          "question": "Can I go back to an older version?",
          "answer": "Yes. Every version is immutable and a rollback is instant."
        },
        {
          "question": "Who owns the data?",
          "answer": "You do, and you can export it as CSV or NDJSON."
        }
      ],
    });
    const onToggle = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("faq-accordion:toggle", onToggle);
    return () => {
      element.removeEventListener("faq-accordion:toggle", onToggle);
    };
  }, []);

  return <faq-accordion ref={ref} headline="Questions" 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/FaqAccordion.vue

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

<template>
  <faq-accordion
    headline="Questions"
    locale="en"
    :items.prop="[{&quot;question&quot;:&quot;Does it slow my page down?&quot;,&quot;answer&quot;:&quot;The loader is async and tiny; nothing blocks your own load.&quot;},{&quot;question&quot;:&quot;Can I go back to an older version?&quot;,&quot;answer&quot;:&quot;Yes. Every version is immutable and a rollback is instant.&quot;},{&quot;question&quot;:&quot;Who owns the data?&quot;,&quot;answer&quot;:&quot;You do, and you can export it as CSV or NDJSON.&quot;}]"
    @faq-accordion:toggle="onToggle"
  />
</template>

vite.config.ts

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

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

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/faq-accordion.component.ts

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

@Component({
  selector: "app-faq-accordion",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <faq-accordion headline="Questions" locale="en" [items]="values.items"></faq-accordion>
  `,
})
export class FaqAccordionComponent {
  readonly values = {
    items: [
      {
        "question": "Does it slow my page down?",
        "answer": "The loader is async and tiny; nothing blocks your own load."
      },
      {
        "question": "Can I go back to an older version?",
        "answer": "Yes. Every version is immutable and a rollback is instant."
      },
      {
        "question": "Who owns the data?",
        "answer": "You do, and you can export it as CSV or NDJSON."
      }
    ],
  };

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

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

<faq-accordion
  headline="Questions"
  locale="en"
  items={[
    {
      "question": "Does it slow my page down?",
      "answer": "The loader is async and tiny; nothing blocks your own load."
    },
    {
      "question": "Can I go back to an older version?",
      "answer": "Yes. Every version is immutable and a rollback is instant."
    },
    {
      "question": "Who owns the data?",
      "answer": "You do, and you can export it as CSV or NDJSON."
    }
  ]}
  onfaq-accordion:toggle={onToggle}
></faq-accordion>

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

/* faq-accordion: no CSS variable set */

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
headline	string	nenhum	Replaces the default heading.
items	list	[{"question":"Como funciona a entrega?","answer…	The questions and answers, in the site's language.
multiple	boolean	false	Lets several answers stay open at once.
locale	pt-BR \| en	pt-BR	–

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
toggle	The visitor opened or closed an answer.

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 "Perguntas frequentes" (faq-accordion): Perguntas que abrem e fecham, do jeito acessível. 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

Carrossel de cartões<card-carousel>
Preferências da newsletter<newsletter-preferences>
Antes e depois<before-after-slider>