\n\n \n ```\n\n \n \n ```svelte fileName=\"FAQ.svelte\"\n \n\n

\n {item.question}\n
{item.answer}
\n

\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {item.question}\n
{item.answer}
\n

\n );\n };\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n import { For } from \"solid-js\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n

\n {(item) => (\n

\n {item.question}\n

{item.answer}

\n

\n )}\n

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

\n {{ item.question }}\n
{{ item.answer }}
\n

\n `,\n })\n export class FAQComponent {\n items = useIntlayer(\"faq\");\n }\n ```\n\n \n \n ```javascript fileName=\"faq.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const faq = useIntlayer(\"faq\");\n\n faq.forEach((item) => {\n console.log(item.question);\n console.log(item.answer);\n });\n ```\n\n \n\n\n### Elemento único por índice\n\n```tsx\nconst faq2 = useIntlayer(\"faq\", { item: 2 });\n// → { question: string; answer: string }\n```\n\n### Elemento único con configuración regional explícita\n\n```tsx\nconst faq2Es = useIntlayer(\"faq\", { item: 2, locale: \"es\" });\n```\n\n## Casos de uso típicos\n\n- Listas de preguntas frecuentes (FAQ)\n- Niveles de precios\n- Diapositivas de carrusel / control deslizante\n- Instrucciones paso a paso\n","description":"Utilice el campo de metadatos item en los archivos de contenido de Intlayer para crear colecciones ordenadas de elementos localizados seleccionables por índice en tiempo de ejecución.","url":"https://intlayer.org/es/doc/concept/collections","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Colecciones, Lista de Contenido, 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 colecciones 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

Colecciones

Una colección es un conjunto de archivos de contenido que comparten la misma clave de diccionario (key) pero cada uno declara un índice de elemento (item) diferente. Intlayer los fusiona en una única lista ordenada en el momento de la compilación.

Declarar elementos de colección

Cada archivo representa un elemento. El campo item es su posición en la lista (basado en 1).

faq.1.content.ts

Copiar código

Copiar el código al portapapeles

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

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;

faq.2.content.ts

Copiar código

Copiar el código al portapapeles

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

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

Consumir una colección

Todos los elementos

FAQ.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "react-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "next-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.vue

Copiar código

Copiar el código al portapapeles

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

FAQ.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

FAQ.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "preact-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

FAQ.tsx

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

faq.component.ts

Copiar código

Copiar el código al portapapeles

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

faq.js

Copiar código

Copiar el código al portapapeles

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

Elemento único por índice

tsx

Copiar código

Copiar el código al portapapeles

const faq2 = useIntlayer("faq", { item: 2 });// → { question: string; answer: string }

Elemento único con configuración regional explícita

tsx

Copiar código

Copiar el código al portapapeles

const faq2Es = useIntlayer("faq", { item: 2, locale: "es" });

Casos de uso típicos

Listas de preguntas frecuentes (FAQ)
Niveles de precios
Diapositivas de carrusel / control deslizante
Instrucciones paso a paso

Archivo por locale Variantes