\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 por defecto\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 por defecto\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 nombrada\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### Variante nombrada con configuración regional explícita\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"es\",\n});\n```\n\n## Casos de uso típicos\n\n- Pruebas A/B impulsadas por una clave de experimento\n- Banners promocionales o estacionales\n- Mensajes bajo indicadores de función (feature flags)\n- Campañas de marketing específicas para una región\n","description":"Utilice el campo de metadatos de variante en los archivos de contenido de Intlayer para declarar alternativas de contenido nombradas (pruebas A/B, banners de temporada, copia con indicadores de función) y cambie entre ellas en tiempo de ejecución sin cambios de código.","url":"https://intlayer.org/es/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Variantes, Pruebas A/B, Indicadores de Funciones, Contenido Dinámico, Intlayer, Internacionalización","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}

Autor:

Creación:2026-06-12Última actualización:2026-06-12

Referencia esta doc a tu asistente AI favoritoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Lanzamiento de la función de variantes de diccionarios"
v9.0.012/6/2026

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Variantes

Una variante es un conjunto de archivos de contenido que comparten la misma clave de diccionario (key) pero cada uno lleva un nombre de variante (variant) diferente. Intlayer sirve el archivo apropiado en función del selector pasado a useIntlayer.

Declarar variantes

Cada archivo representa una alternativa nombrada. Omitir variant (o establecerlo en "default") lo marca como la variante por defecto (fallback).

hero-banner.content.ts

Copiar código

Copiar el código al portapapeles

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 el código al portapapeles

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 maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

Consumir variantes

Variante por defecto

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";

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

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

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";

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

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

Hero.vue

Copiar código

Copiar el código al portapapeles

<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 el código al portapapeles

<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 el código al portapapeles

import { useIntlayer } from "preact-intlayer";

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

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

Hero.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
  const content = useIntlayer("hero-banner");
  // → variante por defecto

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

hero.component.ts

Copiar código

Copiar el código al portapapeles

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 el código al portapapeles

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

Variante nombrada

tsx

Copiar código

Copiar el código al portapapeles

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

Variante nombrada con configuración regional explícita

tsx

Copiar código

Copiar el código al portapapeles

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

Casos de uso típicos

Pruebas A/B impulsadas por una clave de experimento
Banners promocionales o estacionales
Mensajes bajo indicadores de función (feature flags)
Campañas de marketing específicas para una región

Colecciones Registros dinámicos