\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 predefinita\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 predefinita\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 denominata\n\n```tsx\nconst { headline, cta } = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n});\n```\n\n### Variante denominata con locale esplicita\n\n```tsx\nconst content = useIntlayer(\"hero-banner\", {\n variant: \"black_friday\",\n locale: \"it\",\n});\n```\n\n## Casi d'uso tipici\n\n- Test A/B guidati da una chiave di esperimento\n- Banner stagionali o promozionali\n- Messaggi condizionati da feature flag\n- Campagne di marketing specifiche per area geografica\n","description":"Utilizza il campo dei metadati variant nei file di contenuto di Intlayer per dichiarare alternative di contenuto denominate (test A/B, banner stagionali, testi sotto feature flag) e passare da una all'altra a runtime senza modifiche al codice.","url":"https://intlayer.org/it/doc/concept/variants","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Varianti, Test A/B, Feature Flag, Contenuto Dinamico, Intlayer, Internazionalizzazione","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}

Autore:

Creazione:2026-06-12Ultimo aggiornamento:2026-06-12

Riferimento a questa documentazione al tuo assistente AI preferitoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Rilascio della funzionalità delle varianti di dizionari"
v9.0.012/06/2026

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Varianti

Una variante (Variant) è un insieme di file di contenuto che condividono la stessa chiave di dizionario (key) ma ognuno porta un nome di variante (variant) diverso. Intlayer serve il file appropriato in base al selettore passato a useIntlayer.

Dichiarare le varianti

Ogni file rappresenta un'alternativa denominata. Omettere variant (o impostarlo su "default") lo contrassegna come variante di fallback (predefinita).

hero-banner.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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;

Consumare le varianti

Variante predefinita

Hero.tsx

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "react-intlayer";

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

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

Hero.tsx

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "next-intlayer";

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

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

Hero.vue

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "preact-intlayer";

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

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

Hero.tsx

Copiare il codice

Copiare il codice nella clipboard

import { useIntlayer } from "solid-intlayer";

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

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

hero.component.ts

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Variante denominata

tsx

Copiare il codice

Copiare il codice nella clipboard

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

Variante denominata con locale esplicita

tsx

Copiare il codice

Copiare il codice nella clipboard

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

Casi d'uso tipici

Test A/B guidati da una chiave di esperimento
Banner stagionali o promozionali
Messaggi condizionati da feature flag
Campagne di marketing specifiche per area geografica

Collezioni Record dinamici