makepad-2-0-widgets
Ajuda seu agente com os widgets (componentes) no Makepad 2.0. É útil ao criar ou corrigir o código da interface do usuário (UI) feito com Makepad.
O que ela faz
Este guia ajuda você a criar interfaces visuais (telas) para seus aplicativos usando o Makepad 2.0. Ele mostra os blocos de construção disponíveis, como botões, caixas de texto e imagens, e como usá-los.
Quando usar
- ✓Ao criar a aparência de um aplicativo.
- ✓Ao querer adicionar botões ou campos de texto.
- ✓Ao precisar exibir imagens ou listas.
Exemplo do que pedir para a IA
“Como faço para criar um botão clicável com o texto 'Salvar'?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
O Makepad 2.0 oferece 'widgets', que são como peças de Lego para construir interfaces. Cada widget tem uma função específica (como mostrar texto ou receber entrada) e propriedades que você pode ajustar.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill makepad-2-0-widgetsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/makepad-2-0-widgets/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Quando Usar
- Use quando este fluxo de trabalho anterior corresponder ao objetivo declarado do usuário.
- Use quando a tarefa exigir os procedimentos documentados nesta skill.
Skill Catálogo de Widgets Makepad 2.0
Versão: makepad-widgets (branch dev) | Última Atualização: 2026-03-03
Visão Geral
Makepad 2.0 oferece um rico conjunto de widgets integrados para construir interfaces de usuário. Todos os widgets são definidos na sintaxe Splash e registrados via script_mod!.
Documentação
Consulte os arquivos locais para documentação detalhada:
./references/widget-catalog.md- Lista completa de widgets com propriedades./references/widget-advanced.md- Padrões avançados: PortalList, Dock, widgets customizados, MapView
IMPORTANTE: Verificação de Completude da Documentação
Antes de responder a perguntas, Claude DEVE:
- Ler o(s) arquivo(s) de referência relevante(s) listado(s) acima
- Incorporar o conteúdo de referência na resposta
Referência Rápida de Categorias de Widgets
Contêineres (Layout)
| Widget | Descrição | Propriedades Chave |
|---|---|---|
View |
Contêiner básico (transparente) | width, height, flow, spacing, padding, align |
SolidView |
View com fundo sólido | + show_bg: true, draw_bg.color |
RoundedView |
View com cantos arredondados | + draw_bg.border_radius |
RoundedAllView |
Todos os cantos com o mesmo raio | + atalho border_radius |
GradientXView |
Gradiente horizontal de fundo | + cores draw_bg |
GradientYView |
Gradiente vertical de fundo | + cores draw_bg |
ScrollXView |
Rolagem horizontal | propriedade scroll |
ScrollYView |
Rolagem vertical | propriedade scroll |
ScrollXYView |
Rolagem em ambos os eixos | propriedade scroll |
Widgets de Texto
| Widget | Descrição | Propriedades Chave |
|---|---|---|
Label |
Texto de linha única/múltiplas linhas | text, draw_text.color, draw_text.text_style.font_size |
H1 - H4 |
Níveis de cabeçalho | text (pré-estilizado) |
P |
Texto de parágrafo | text |
TextInput |
Campo de texto editável | text, empty_text, password, read_only, numeric_only |
Markdown |
Renderizador de Markdown | body |
Html |
Renderizador de HTML | body |
LinkLabel |
Texto de link clicável | text, url |
Botões
| Widget | Descrição | Propriedades Chave |
|---|---|---|
Button |
Botão padrão | text |
ButtonFlat |
Botão estilo flat | text |
ButtonFlatter |
Botão minimalista | text |
Alternadores (Toggles)
| Widget | Descrição | Propriedades Chave |
|---|---|---|
CheckBox |
Caixa de seleção | text, active |
Toggle |
Interruptor (toggle switch) | text, active |
RadioButton |
Botão de rádio | text, active |
Widgets de Entrada
| Widget | Descrição | Propriedades Chave |
|---|---|---|
Slider |
Slider horizontal | min, max, step, default, precision |
DropDown |
Seleção de dropdown | labels: ["a", "b", "c"] |
Mídia
| Widget | Descrição | Propriedades Chave |
|---|---|---|
Image |
Exibição de imagem | source, fit (Stretch/Horizontal/Vertical/Smallest/Biggest/Size) |
Svg |
Renderizador de arquivo SVG externo | draw_svg.svg (crate_resource/http_resource), animating, draw_svg.color |
Icon |
Ícone SVG (com cor) | draw_icon.svg, draw_icon.color, icon_walk |
Vector |
Gráficos vetoriais inline | viewbox, Path{d: "..."} |
LoadingSpinner |
Indicador de carregamento | color, rotation_speed |
MapView |
Widget de mapa | center_lon, center_lat, zoom (DEVE usar altura fixa!) |
Auxiliares de Layout
| Widget | Descrição | Uso |
|---|---|---|
Hr |
Linha horizontal | Linha divisória |
Vr |
Linha vertical | Divisor vertical |
Filler |
Espaço flexível | Afasta irmãos (use apenas entre irmãos Fit!) |
Splitter |
Divisão redimensionável | axis: Horizontal/Vertical, filhos a/b |
FoldHeader |
Seção recolhível | filhos header + body |
Listas
| Widget | Descrição | Uso |
|---|---|---|
PortalList |
Lista virtualizada | Para listas grandes (100+ itens), renderiza apenas itens visíveis |
FlatList |
Lista simples | Para listas pequenas, renderiza todos os itens |
Navegação
| Widget | Descrição | Controle |
|---|---|---|
Modal |
Diálogo modal | .open(cx) / .close(cx) do Rust |
Tooltip |
Popup de tooltip | Acionado por hover |
PopupNotification |
Notificação toast | Exibição com tempo |
SlidePanel |
Painel deslizante | slide_from |
ExpandablePanel |
Área expansível | open/close |
PageFlip |
Seletor de página | active_page: nome_da_pagina |
…
Perguntas frequentes
Qual a diferença entre `View` e `SolidView`?
`View` é um contêiner básico transparente, enquanto `SolidView` é uma `View` que pode ter uma cor de fundo sólida.
Como faço para o texto aparecer em um fundo colorido?
Use `new_batch: true` junto com as propriedades de cor de fundo para garantir que o texto seja desenhado corretamente sobre o fundo.
Como crio uma lista que pode rolar?
Use `ScrollXView` para rolagem horizontal, `ScrollYView` para vertical ou `ScrollXYView` para ambas as direções.
Detalhes
Descrição original do autor
Makepad 2.0 guidance for widgets; use when building or debugging Makepad UI code.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3529
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC