O padrão Builder para interfaces sem apresentação
Exponha funções getter de atributos e eventos para componentes totalmente acessíveis e sem estilos predefinidos.
O padrão Builder para interfaces sem apresentação é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Interface sem apresentação
Os componentes sem apresentação fornecem lógica e acessibilidade sem estilos, permitindo que os consumidores os personalizem completamente.
Padrão de construção
Exponha funções que obtêm atributos e eventos para que os consumidores as distribuam pelos próprios elementos.
function createToggle() {
let pressed = $state(false);
return {
get pressed() { return pressed; },
triggerAttrs: () => ({ "aria-pressed": pressed, onclick: () => pressed = !pressed })
};
}Uso no componente
Os consumidores distribuem os atributos pelo próprio botão.
const toggle = createToggle();
<button {...toggle.triggerAttrs()}>Toggle</button>Acessibilidade integrada
O construtor gerencia os atributos ARIA, o controle do teclado e o gerenciamento do foco.
Exemplos
Caixa de combinação, menu, diálogo, abas e acordeão — Melt UI e Headless UI usam esse padrão.
Por que usar uma interface sem apresentação
Os designers controlam a aparência, enquanto a biblioteca gerencia o comportamento complexo. O melhor dos dois mundos.
Comparação com propriedades de renderização
O padrão de construção é semelhante, mas expõe APIs parecidas com ganchos em vez de renderizar.
Composição de construtores
Combine vários construtores para criar componentes complexos (caixa de combinação = menu + entrada).
Segurança de tipos
Defina tipos rigorosos para os atributos e auxiliares retornados, permitindo o preenchimento automático.
Estruturas
Melt UI é uma biblioteca sem apresentação popular para Svelte que segue esse padrão.
Vantagens e desvantagens
Flexibilidade máxima, com um pouco mais de código auxiliar do que os componentes totalmente estilizados.
Verificação rápida
O que uma interface sem apresentação oferece?
Revisão
O padrão de construção expõe funções de atributos e eventos para interfaces sem apresentação: lógica e acessibilidade para que os consumidores definam os estilos livremente.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “O padrão Builder para interfaces sem apresentação” é grátis?
Sim — o texto completo de “O padrão Builder para interfaces sem apresentação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “O padrão Builder para interfaces sem apresentação”?
Exponha funções getter de atributos e eventos para componentes totalmente acessíveis e sem estilos predefinidos. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “O padrão Builder para interfaces sem apresentação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Propriedades de renderização com snippets
- Componentes de ordem superior
- O padrão Builder para interfaces sem apresentação
- Componentes compostos com contexto