\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### Item único por índice\n\n```tsx\nconst faq2 = useIntlayer(\"faq\", { item: 2 });\n// → { question: string; answer: string }\n```\n\n### Item único com localidade explícita\n\n```tsx\nconst faq2Pt = useIntlayer(\"faq\", { item: 2, locale: \"pt\" });\n```\n\n## Casos de uso típicos\n\n- Listas de FAQ (Perguntas Frequentes)\n- Níveis de preços\n- Slides de carrossel / slider\n- Instruções passo a passo\n","description":"Use o campo de metadados item em arquivos de conteúdo do Intlayer para criar coleções ordenadas de itens localizados selecionáveis por índice em tempo de execução.","url":"https://intlayer.org/pt/doc/concept/collections","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"Coleções, Lista de Conteúdo, 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 coleções 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

Coleções

Uma coleção é um conjunto de arquivos de conteúdo que compartilham a mesma chave de dicionário (key), mas cada um declara um índice de item (item) diferente. O Intlayer os mescla em uma única lista ordenada no momento da compilação.

Declarando itens de coleção

Cada arquivo representa um item. O campo item é a sua posição na lista (baseada em 1).

faq.1.content.ts

Copiar código

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

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 o código para a área de transferência

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;

Consumindo uma coleção

Todos os itens

FAQ.tsx

Copiar código

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

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 o código para a área de transferência

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 o código para a área de transferência

<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 o código para a área de transferência

<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 o código para a área de transferência

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 o código para a área de transferência

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 o código para a área de transferência

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 o código para a área de transferência

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

Item único por índice

tsx

Copiar código

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

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

Item único com localidade explícita

tsx

Copiar código

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

const faq2Pt = useIntlayer("faq", { item: 2, locale: "pt" });

Casos de uso típicos

Listas de FAQ (Perguntas Frequentes)
Níveis de preços
Slides de carrossel / slider
Instruções passo a passo

Arquivo por locale Variantes