🇧🇷 PT | 🇺🇸 EN
GitHub

i18n

Sistema completo de internacionalização com detecção automática de idioma, suporte a múltiplos idiomas e capacidade de trocar idioma dinamicamente sem recriar o componente.

Detecção Automática de Idioma

VanillaSmartSelect detecta automaticamente o idioma do navegador e aplica as traduções correspondentes.

✓ Idioma detectado:
Teste: Digite no campo para ver "Buscando...", busque algo inexistente para ver "Nenhum resultado"
Ver código

HTML

<select id="auto" multiple>
  <option value="apple">Maçã</option>
  <option value="banana">Banana</option>
  <option value="orange">Laranja</option>
  <option value="grape">Uva</option>
  <option value="strawberry">Morango</option>
</select>

JavaScript

// Detecção automática do idioma do navegador
new VanillaSmartSelect('#auto', {
  searchable: true,
  maximumSelectionLength: 3
});

// O idioma é detectado automaticamente baseado em navigator.language

Trocar Idioma Dinamicamente

Altere o idioma em tempo de execução sem recriar o select.

Instruções:
1. Clique nos botões para trocar o idioma
2. Digite no campo para ver mensagem "Buscando..." no idioma selecionado
3. Busque algo inexistente para ver mensagem "Nenhum resultado"
Ver código

HTML

<button onclick="changeLanguage('en')">🇺🇸 English</button>
<button onclick="changeLanguage('pt-BR')">🇧🇷 Português</button>
<button onclick="changeLanguage('es')">🇪🇸 Español</button>

<select id="dynamic" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
  <option value="rust">Rust</option>
  <option value="go">Go</option>
</select>

JavaScript

import { getLanguage } from './vanilla-smart-select.js';

const dynamicSelect = new VanillaSmartSelect('#dynamic', {
  searchable: true,
  language: getLanguage('pt-BR') // Idioma inicial
});

function changeLanguage(lang) {
  // Trocar idioma dinamicamente
  dynamicSelect.updateLanguage(getLanguage(lang));
  
  console.log(`Language changed to: ${lang}`);
}

Personalizar Mensagens Específicas

Sobrescreva mensagens específicas mantendo as outras traduções padrão.

Mensagem customizada: A mensagem de limite máximo foi personalizada com emoji.
Teste: Tente selecionar mais de 2 itens para ver a mensagem customizada.
Ver código

HTML

<select id="custom" multiple>
  <option value="red">Vermelho</option>
  <option value="blue">Azul</option>
  <option value="green">Verde</option>
  <option value="yellow">Amarelo</option>
  <option value="purple">Roxo</option>
</select>

JavaScript

import { getLanguage } from './vanilla-smart-select.js';

new VanillaSmartSelect('#custom', {
  searchable: true,
  maximumSelectionLength: 2,
  language: {
    ...getLanguage('pt-BR'), // Mantém traduções padrão
    // Sobrescreve apenas a mensagem de limite máximo
    maximumSelected: (args) => 
      `🚫 Ops! Limite de ${args.maximum} ${args.maximum === 1 ? 'item' : 'itens'} atingido!`
  }
});
💡 Dica: Você pode usar funções para mensagens dinâmicas que recebem parâmetros como maximum, minimum, over, etc.

Idiomas Disponíveis

Idioma Código Status
🇺🇸 English en ✓ Disponível
🇧🇷 Português (Brasil) pt-BR ✓ Disponível
🇪🇸 Español es ✓ Disponível

API de Tradução

📋 Mensagens Disponíveis:
  • noResults: Exibido quando nenhum resultado é encontrado na busca
  • searching: Exibido durante a busca de resultados
  • loadingMore: Exibido ao carregar mais resultados (paginação)
  • errorLoading: Exibido quando ocorre erro ao carregar dados
  • maximumSelected: Exibido quando atinge o limite de seleção
  • inputTooShort: Exibido quando busca tem menos caracteres que o mínimo
  • inputTooLong: Exibido quando busca excede o máximo de caracteres

Exemplo Completo de Configuração

// Definir todas as mensagens customizadas
new VanillaSmartSelect('#mySelect', {
  language: {
    noResults: 'Nenhum resultado encontrado',
    searching: 'Buscando...',
    loadingMore: 'Carregando mais resultados...',
    errorLoading: 'Erro ao carregar resultados',
    maximumSelected: (args) => `Você pode selecionar apenas ${args.maximum} itens`,
    inputTooShort: (args) => `Digite ${args.minimum} ou mais caracteres`,
    inputTooLong: (args) => `Remova ${args.over} caractere(s)`
  }
});

Usar Idioma Pré-definido

import { getLanguage } from './vanilla-smart-select.js';

// Usar inglês
new VanillaSmartSelect('#mySelect', {
  language: getLanguage('en')
});

// Usar espanhol
new VanillaSmartSelect('#mySelect', {
  language: getLanguage('es')
});

Boas Práticas

✅ Recomendações:
  • Detecção automática: Use detecção automática para melhor experiência do usuário
  • Persistência: Salve preferência de idioma no localStorage
  • Fallback: Sempre tenha inglês como idioma fallback
  • Contexto: Adapte mensagens ao contexto da aplicação
  • Plural: Use funções para lidar corretamente com singular/plural
  • Performance: Use updateLanguage() ao invés de recriar o componente
← Templates Home →