Componentes · Interface

Organizar uma tela longa

Um cadastro com dezenas de campos vira uma rolagem sem fim. Abas dividem a tela em capítulos, cards emolduram um bloco que precisa se destacar e a sanfona esconde o que raramente muda. Você só decide o que vai em cada parte; a troca de aba e o abre-e-fecha já vêm prontos.

<mad-tabs> Paleta → Interface → Tabs / Card / Accordion Passou de 2 telas de rolagem, divida em abas — 3 a 6 abas por formulário
01

Aba, card ou sanfona

Os três organizam, nenhum grava nada: os campos continuam sendo os mesmos, só mudam de lugar na tela. Abas mostram uma parte por vez; o card emoldura um bloco sem esconder nada; a sanfona deixa cada bloco fechado até a pessoa abrir.

Sua situaçãoComponente certo
O formulário tem capítulos claros (dados, endereços, acessos) e a pessoa trabalha em um de cada vezAbas
Um bloco precisa se destacar do resto, com título e uma linha de rodapéCard
Perguntas frequentes, observações, opções avançadas que quase ninguém abreSanfona
Só dar um título e um ícone a um grupo de campos, sem esconderSeção — veja Formulário
Etapas em ordem, com avançar e voltarWizard
Editar um registro sem sair da listaBotão com Abrir drawer — veja Botão
Abas escondem, não protegem. Campo em aba fechada continua sendo enviado e gravado como qualquer outro. Para tirar um campo de alguém, use permissões.
1

Colocar na tela

  1. Abra o formulário no Studio e clique com o botão direito onde o bloco vai ficar — em geral numa Linha de uma coluna só, para ocupar a largura toda.
  2. Escolha Tabs, Card ou Accordion na categoria Interface.
  3. Arraste para dentro os campos e seções que já existem, ou crie novos ali dentro.
Resultado: o Tabs nasce com uma aba chamada Aba 1, o Card nasce vazio e sem título, e a Sanfona nasce com um item aberto chamado Item 1. Nada muda para quem usa o sistema até você colocar campos dentro.
2

Montar as abas

  1. Selecione o Tabs e clique no + da barra de ações (Adicionar aba). A aba nova já vem com uma Linha dentro.
  2. Clique no lápis da aba (Editar nome) e digite o título que a pessoa vai ler — Endereços, Acessos.
  3. Para trocar a ordem, use as setas da barra de ações com a aba selecionada.
  4. Selecione uma aba: Título é o texto que aparece; Nome (ID) é o identificador interno, que você não precisa mexer; Ícone aparece antes do texto.
  5. Selecione o Tabs: em Aba padrão, escolha qual abre primeiro; em Variante, escolha o visual — default em botões, underline sublinhada, vertical em coluna, à esquerda.
  6. Para levar um campo de uma aba para outra, selecione o campo e use Mover para aba na barra de ações.
Resultado para quem usa o sistema: a pessoa abre o cadastro na aba que você escolheu, troca de capítulo com um clique e, se salvar com um campo errado numa aba escondida, a tela pula sozinha para a aba do erro.
Destaque
Painel de propriedades de uma Aba com a seção Identificação aberta

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

O que o painel escreve no código

        

      

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades do Tabs com Comportamento e Estilo abertos

          

        

        

      

      
A aba aberta não é lembrada: ao recarregar a tela, volta para a Aba padrão. Coloque nela
o que a pessoa mais usa.

    


    

      
3
Remover uma aba sem perder o conteúdo

      
    
        
  1. Clique no × da aba, no canvas (Remover aba).
    2. 
        
  2. Se a aba estiver vazia, ela some na hora. Se tiver campos, uma janela pergunta o que fazer com eles.
    3. 
        
  3. Em Mover conteúdo para, escolha a aba que recebe os campos e clique em Mover e remover.
    4. 
        
  4. Excluir tudo apaga a aba e os campos dentro dela — os campos saem da tela, não do banco.
    5. 
      

      
Resultado: os campos aparecem no fim da aba escolhida, na mesma ordem em que estavam.

      

        Destaque
        
        
        
        
      

      

        

          

            
Janela Remover aba, com a escolha da aba de destino e os botões Mover e remover e Excluir tudo

          

          
Clique no print para ampliar.

        

        

      

    


    

      
4
Destacar um bloco com Card

      
    
        
  1. Selecione o Card.
    2. 
        
  2. Em Título, escreva o que o bloco é — Endereço de cobrança.
    3. 
        
  3. Em Rodapé, uma linha curta de contexto — quem preenche, quando é usado. Deixe vazio se não tiver o que dizer.
    4. 
        
  4. Arraste para dentro os campos que pertencem ao bloco.
    5. 
      

      
Resultado para quem usa o sistema: o bloco aparece numa moldura com o título em cima e o rodapé embaixo, sempre visível — nada fica escondido.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades do Card com a seção Identificação aberta

          

        

        

      

      
O Card é uma moldura, e só: não fecha, não tem ícone nem cores. Para um bloco que abre e fecha,
use a Sanfona; para título com ícone sem moldura, use a Seção.

    


    

      
5
Esconder o que raramente muda com a Sanfona

      
    
        
  1. Selecione o item da sanfona — a Sanfona nasce com um; para outro, selecione a sanfona e clique no + da barra de ações (Adicionar item), ou escolha Item de Accordion na paleta.
    2. 
        
  2. Em Título, escreva a pergunta ou o nome do bloco.
    3. 
        
  3. Marque Aberto no item que deve começar aberto. Os outros começam fechados.
    4. 
        
  4. Arraste para dentro os campos ou o texto do item.
    5. 
      

      
Resultado para quem usa o sistema: cada item mostra só o título com uma seta; a pessoa abre os que quiser, e vários podem ficar abertos ao mesmo tempo.

      

        Destaque
        
        
        
        
      

      

        

          

            
Painel de propriedades de um item da sanfona com Identificação e Comportamento abertos

          

        

        

      

    


    

      
6
Testar antes de entregar

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

      

        

            
O que fazerO que tem que acontecer

            
Abrir a telaA aba padrão está ativa e com conteúdo.

            
Clicar em cada abaO conteúdo troca sem recarregar a página.

            
Salvar com um campo obrigatório vazio numa aba escondidaA tela pula para a aba do campo e mostra o aviso.

            
Preencher um campo numa aba, trocar de aba e salvarO valor foi gravado mesmo com a aba fechada.

            
Abrir dois itens da sanfonaOs dois ficam abertos ao mesmo tempo.

            
Abrir no celularAs abas rolam na horizontal e a aba ativa aparece na tela.

        

      

    


    

      
08
Problemas comuns

      
Salvo e só aparece "Corrija os erros antes de continuar"

      
O campo com erro está numa aba escondida. A tela pula para a primeira aba com erro, mas a aba
      em si não ganha marca — se houver erro em mais de uma, corrija e salve de novo.

      
A tela abre com as abas em cima e nada embaixo

      
O Tabs está sem Aba padrão. Acontece em tela escrita à mão: escolha uma aba no painel ou
      escreva o nome dela no código.

      
O título do Card não aparecia no sistema

      
Em versões anteriores o painel gravava o título num lugar que o app não lia. Abra a tela,
      salve de novo e republique o projeto.

      
A sanfona abre vários itens ao mesmo tempo

      
É assim que ela funciona: cada item abre e fecha por conta própria. Se um deve começar aberto,
      marque Aberto só nele.

      
Escondi um campo numa aba e ele continua sendo gravado

      
Aba esconde, não desliga. Para um campo não ir ao banco, tire-o da tela ou use uma regra de
      visibilidade — não uma aba.

      
As abas empilharam uma embaixo da outra

      
Em código escrito à mão, uma aba ficou fora da lista de abas. O editor aponta a linha; mova a
      aba para dentro da lista.

    


    

      
09
Referência: painel × código

      
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados. O
      editor grava cada aba como um par: o botão na lista de abas e o painel com o conteúdo, ligados
      pelo mesmo nome.

      

        

            
No painelNo códigoPadrão

            
Aba padrãodefaulta primeira aba

            
Variantevariantdefault

            
Nome (ID)name—

            
Título (da aba)label—

            
Ícone (da aba)icon—

            
Lista de abas<mad-tabs-list> · <mad-tab>—

            
Título (do card)header—

            
Rodapéfooter—

            
Título (do item da sanfona)heading—

            
Abertoexpandedfechado

            
Seção com título e ícone<mad-form-section>—