SWCore / Componentes / Idiomas

Idiomas Componentes

Traduz a página gratuitamente com uma interface própria em bandeiras, siglas ou nomes — sem exibir controles visuais do Google.

O que é

O componente sw-lang cria um seletor acessível de idiomas e usa o Google Translate gratuito somente como motor externo. A interface, os estados, o responsivo e a persistência pertencem ao SWCore. O conteúdo original continua no HTML para SEO e permanece visível se o serviço externo não responder.

Como funciona

O seletor é renderizado imediatamente, mas o script de tradução só é solicitado quando o visitante escolhe outro idioma. O componente localiza o controle interno do tradutor, aplica o idioma escolhido e mantém toda a interface externa escondida. Bandeiras usam emoji nativo, sem imagens nem requisições adicionais.

Exemplos

01 · Siglas de Duas Letras (Padrão Compacto) Ao vivo 
<div
  sw-lang
  sw-lang-source="pt"
  sw-lang-options="pt,en,es,fr"
  sw-lang-view="codes">
</div>
02 · Bandeiras dos Países Ao vivo 
<div
  sw-lang
  sw-lang-source="pt-BR"
  sw-lang-options="pt-BR,en-US,es-ES,fr"
  sw-lang-view="flags">
</div>
03 · Bandeira + Sigla em Linha Ao vivo 
<div
  sw-lang
  sw-lang-source="pt-BR"
  sw-lang-options="pt-BR,en-US,es-ES"
  sw-lang-view="full"
  sw-lang-layout="inline">
</div>

Atributos

sw-lang
ativa o componente
sw-lang-source="pt"
idioma original da página
sw-lang-options="pt,en,es"
idiomas disponíveis, separados por vírgula
sw-lang-view="codes"
visual: codes, flags, full ou names
sw-lang-layout="dropdown"
layout: dropdown ou inline
sw-lang-label="Selecionar idioma"
rótulo acessível personalizado

Variantes

codes
siglas compactas de duas letras: PT, EN, ES
flags
bandeiras por emoji, sem arquivos de imagem
full
bandeira e sigla juntas
names
nome completo do idioma

Eventos

sw:lang:ready
{ language, source } quando o seletor fica pronto
sw:lang:change
{ language, source } após a troca
sw:lang:error
{ error, language } quando o motor externo falha

API (JavaScript)

SW.Lang.set("en")
altera o idioma do primeiro seletor
SW.Lang.get()
retorna o idioma atual
SW.Lang.reset()
volta ao idioma original

Requisitos

  • Conexão com a internet e permissão para carregar translate.google.com.
  • Use códigos regionais como pt-BR, pt-PT, en-US e en-GB quando a bandeira precisar representar um país específico.

Limitações — o que ele não faz

  • A tradução gratuita depende de um serviço externo do Google e pode deixar de funcionar se o fornecedor alterar o widget.
  • Tradução automática pode exigir revisão humana em textos jurídicos, médicos, técnicos ou comerciais sensíveis.
  • O idioma original deve permanecer no HTML: este componente não substitui páginas traduzidas no servidor quando SEO internacional com URLs próprias for requisito.
← AnteriorSWIcons Próximo →Reveal