\n\n \n ```\n\n \n \n ```svelte fileName=\"Hero.svelte\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n \n\n

\n

{$content.headline}

\n {$content.cta}\n

\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"preact-intlayer\";\n\n export const Hero = () => {\n const { headline, cta } = useIntlayer(\"hero-banner\");\n // → variante padrão\n\n return (\n

\n

{headline}

\n {cta}\n

\n );\n };\n ```\n\n \n \n ```tsx fileName=\"Hero.tsx\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { useIntlayer } from \"solid-intlayer\";\n\n export const Hero = () => {\n const content = useIntlayer(\"hero-banner\");\n // → variante padrão\n\n return (\n

\n

{content().headline}

\n {content().cta}\n

\n );\n };\n ```\n\n \n \n ```typescript fileName=\"hero.component.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-hero\",\n template: `\n

\n

{{ content().headline }}

\n {{ content().cta }}\n

\n `,\n })\n export class HeroComponent {\n content = useIntlayer(\"hero-banner\");\n }\n ```\n\n \n \n ```javascript fileName=\"hero.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const { headline, cta } = useIntlayer(\"hero-banner\");\n\n document.body.innerHTML = `\n

\n

${headline}

\n ${cta}\n

\n `;\n ```\n\n \n\n\n### Variante nomeada\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### Variante nomeada com localidade explícita\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"pt\",\n});\n```\n\n## Casos de uso típicos\n\n- Testes A/B de textos controlados por uma chave de experimento\n- Banners promocionais ou sazonais\n- Mensagens baseadas em sinalizadores de recursos (feature flags)\n- Campanhas de marketing específicas de uma região\n","description":"Use o campo de metadados variant nos arquivos de conteúdo do Intlayer para declarar alternativas de conteúdo nomeadas (testes A/B, banners sazonais, textos baseados em sinalizadores de recursos) e alternar entre elas em tempo de execução sem alterações de código.","url":"https://intlayer.org/pt/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Variantes, Testes A/B, Sinalizadores de Recursos, Conteúdo Dinâmico, Intlayer, Internacionalização","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}

Autor:

Criação:2026-06-12Última atualização:2026-06-12

Referência esta documentação ao seu assistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Lançamento do recurso de variantes de dicionários"
v9.0.012/06/2026

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

Editar esta documentação

Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

Link do GitHub para a documentação

Copiar

Copiar o Markdown do documento para a área de transferência

Variantes

Uma variante (Variant) é um conjunto de arquivos de conteúdo que compartilham a mesma chave de dicionário (key), mas cada um carrega um nome de variante (variant) diferente. O Intlayer serve o arquivo apropriado com base no seletor passado para useIntlayer.

Declarando variantes

Cada arquivo representa uma alternativa nomeada. Omitir variant (ou defini-lo como "default") o marca como a variante padrão (fallback).

hero-banner.content.ts

Copiar código

Copiar o código para a área de transferência

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "Développez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;

hero-banner.black-friday.content.ts

Copiar código

Copiar o código para a área de transferência

import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off — today only",
      fr: "−50 % — aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter agora" }),
  },
} satisfies Dictionary;

export default dictionary;

Consumindo variantes

Variante padrão

Hero.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "react-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante padrão

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "next-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante padrão

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.vue

Copiar código

Copiar o código para a área de transferência

<script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
  <section>
    <h1>{{ headline }}</h1>
    <a>{{ cta }}</a>
  </section>
</template>

Hero.svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
  <h1>{$content.headline}</h1>
  <a>{$content.cta}</a>
</section>

Hero.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante padrão

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

Hero.tsx

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante padrão

  return (
    <section>
      <h1>{content().headline}</h1>
      <a>{content().cta}</a>
    </section>
  );
};

hero.component.ts

Copiar código

Copiar o código para a área de transferência

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-hero",
  template: `
    <section>
      <h1>{{ content().headline }}</h1>
      <a>{{ content().cta }}</a>
    </section>
  `,
})
export class HeroComponent {
  content = useIntlayer("hero-banner");
}

hero.js

Copiar código

Copiar o código para a área de transferência

import { useIntlayer } from "vanilla-intlayer";const { headline, cta } = useIntlayer("hero-banner");document.body.innerHTML = `  <section>    <h1>${headline}</h1>    <a>${cta}</a>  </section>`;

Variante nomeada

tsx

Copiar código

Copiar o código para a área de transferência

const { headline, cta } = useIntlayer("hero-banner", {  variant: "black_friday",});

Variante nomeada com localidade explícita

tsx

Copiar código

Copiar o código para a área de transferência

const content = useIntlayer("hero-banner", {  variant: "black_friday",  locale: "pt",});

Casos de uso típicos

Testes A/B de textos controlados por uma chave de experimento
Banners promocionais ou sazonais
Mensagens baseadas em sinalizadores de recursos (feature flags)
Campanhas de marketing específicas de uma região

Coleções Registros dinâmicos