Componentes · Estrutura da tela

Formulário

Antes de escolher os campos, você monta o esqueleto: seções que agrupam assuntos, linhas que dividem a largura em colunas, e a barra de ações no rodapé. Você não escreve código nem CSS: arrasta a estrutura e o formulário já nasce alinhado e responsivo.

<mad-form-section> Paleta → Estrutura do Formulário Acima de 12 campos numa seção, quebre em 2 ou mais
01

Quando usar cada peça

Um formulário do MadBuilder é feito de cinco peças de estrutura. Elas não guardam dado nenhum — servem para organizar os campos que guardam.

Você querA peça certa
Agrupar campos do mesmo assunto, com títuloSeção
Colocar dois ou três campos lado a ladoLinha
Fazer um campo ocupar o dobro da larguraColuna
Empilhar coisas uma embaixo da outra, com espaço igualPilha
Separar dois blocos com um traçoSeparador
A tela ficou longa demais e ninguém acha nadaAbas e cards
Mostrar vários registros numa grade, não um por vezListagem
A Seção é a única peça que aparece para quem usa o sistema (com o título). As outras só organizam o espaço.
1

Montar o esqueleto

  1. Abra o formulário no Studio.
  2. Clique com o botão direito dentro da tela, no ponto onde o bloco deve entrar.
  3. No menu, o grupo Estrutura do Formulário traz Seção, Linha, Coluna, Pilha e Separador.
  4. Escolha Seção para começar: quase toda tela é uma seção com linhas dentro.
  5. Clique na seção recém-criada para o painel da direita mostrar as opções dela.
Resultado: a seção nasce com um título provisório e já aceita campos arrastados para dentro.
Menu de adição rápida aberto sobre o canvas do Studio, com o grupo Estrutura do Formulário no topo da lista
O menu mostra no cabeçalho onde o bloco vai entrar e só oferece o que cabe ali — dentro de uma Linha, por exemplo, não aparece outra Seção.
2

Dar identidade à seção

  1. Selecione a seção e abra Identificação no painel.
  2. Título: o texto que aparece acima do bloco. É o que a pessoa lê.
  3. Subtítulo: uma linha de apoio, opcional — bom para explicar o que preencher ali.
  4. Ícone: um desenho ao lado do título.
  5. Se a seção guarda dados de outra tabela (o endereço de um cliente, por exemplo), abra Fonte de dados e preencha Tabela vinculada.
Resultado para quem usa o sistema: o formulário abre dividido por assunto, com título e ícone em cada bloco — em vez de uma lista corrida de trinta campos.
Destaque
Painel de propriedades de uma Seção, com Identificação e Fonte de dados abertas

Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.

O que o painel escreve no código

        

      

      
Tabela vinculada muda o destino dos campos. Depois de vincular, tudo que for arrastado
para dentro da seção grava na tabela escolhida, não na tabela da tela. Se os valores estão
indo para o lugar errado, confira este campo primeiro.

    


    

      
3
Dividir a largura em colunas

      
A Linha divide o espaço horizontal; a Coluna decide quanto cada campo ocupa dentro dela.

      
    
        
  1. Dentro da seção, adicione uma Linha.
    2. 
        
  2. Selecione a linha e, em Layout, escolha Colunas — 2 é o mais comum, 3 cabe em campos curtos.
    3. 
        
  3. Arraste os campos para dentro da linha. Cada um entra numa coluna.
    4. 
        
  4. Precisa de um campo mais largo? Selecione a Coluna dele e aumente Colunas (span).
    5. 
      

      
Resultado para quem usa o sistema: em tela cheia os campos aparecem lado a lado; no celular eles se empilham sozinhos, sem você fazer nada.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades de uma Linha, com a seção Layout aberta

          

        

        

      

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades de uma Coluna, com Colunas (span) e Coluna inicial

          

        

        

      

      
Pilha é a alternativa quando não há colunas: ela só empilha o que estiver dentro, com o
mesmo espaço entre os itens. Útil para um grupo de caixas de seleção.

    


    

      
4
Fechar a tela: separador e barra de ações

      
    
        
  1. Entre dois blocos que não têm relação, adicione um Separador — um traço fino que dá respiro.
    2. 
        
  2. No fim do formulário, use a barra de ações para os botões de salvar, cancelar e o que mais a tela precisar.
    3. 
        
  3. Selecione o Formulário (o bloco de fora, na trilha do topo do painel) para configurar Ao salvar.
    4. 
      

      
Resultado para quem usa o sistema: a pessoa lê a tela de cima para baixo, encontra os botões sempre no mesmo lugar e sabe onde um assunto termina e outro começa.

      
Como se orientar na estrutura: a trilha no topo do painel (form › form-section › form-grid)
mostra onde você está. Clicando num nome dela você sobe um nível — é o jeito mais rápido de
selecionar a linha ou a seção sem caçar no canvas.

    


    

      
5
Testar antes de entregar

      
Salve a tela e publique no Teste online. Confira nesta ordem:

      

        

            
O que fazerO que tem que acontecer

            
Abrir a tela no computadorOs campos aparecem lado a lado, na quantidade de colunas escolhida.

            
Estreitar a janela até o tamanho de um celularOs campos se empilham, um por linha, sem cortar nada.

            
Ler os títulos das seçõesCada bloco diz de que assunto ele trata.

            
Preencher e salvarOs valores vão para a tabela da tela — e, nas seções vinculadas, para a tabela vinculada.

            
Reabrir o registro salvoTodos os blocos voltam preenchidos.

        

      

    


    

      
07
Problemas comuns

      
Os campos ficam um embaixo do outro, mesmo em tela grande

      
Eles não estão dentro de uma Linha. Campo solto dentro da seção ocupa a largura toda.
      Adicione uma Linha e arraste os campos para dentro dela.

      
Um campo ficou espremido e o vizinho sobrando

      
A Coluna de cada um está com o mesmo tamanho. Aumente Colunas (span) no campo que
      precisa de mais espaço — e lembre que a soma dos spans não deve passar do número de Colunas
      da linha.

      
Salvei e os valores de um bloco não foram para a tabela

      
A seção está com Tabela vinculada preenchida (ou vazia quando deveria estar preenchida).
      Confira em Fonte de dados: é esse campo que decide o destino dos campos de dentro.

      
A tela ficou enorme e ninguém acha o que procura

      
Passou do ponto em que seções resolvem. Divida em abas — cada aba com as suas seções.

    


    

      
08
Referência: painel × código

      
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados.

      

        

            
No painelNo códigoPadrão

            
Títulotitle—

            
Subtítulosubtitle—

            
Íconeicon—

            
Tabela vinculadadetail-tablea tabela da tela

            
Nome (id da seção)name—

            
Seção pai (cadeia)parent—

            
Colunas (da Linha):cols2

            
Template colunastemplatecolunas iguais

            
Colunas (span) (da Coluna)span1

            
Coluna inicialstarta próxima livre

            
Gap (px) (da Pilha)gap—

            
Ao salvarsubmitonSave

            
Espaço do labellabel-gap5px (do tema)

            
Cor do label (Estilo do label)label-colora do tema

            
Tamanho do labellabel-size11px

            
Peso do labellabel-weightnegrito

            
Label em itálicolabel-italicdesligado