Autore:

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

Riferimento a questa documentazione al tuo assistente AI preferito

Google AI mode Gemini

Perplexity Mistral

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

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

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

Record dinamici