Logo

Drawer Detail

Pré-requisitos

  • Ter domínio de drawer para abertura e fechamento via ações.
  • Definir componentes de linha (component CustomerRow) com %props.
  • Conhecer list $Componente: para alimentar o drawer com dados dinâmicos.

Passo a passo

  1. Crie um componente de linha (CustomerRow) com CTA que abre o drawer.
  2. Declare o drawer CustomerDetail recebendo props como nome, empresa e último contato.
  3. Alimente a lista principal com list $CustomerRow: usando valores separados por |.
  4. Adicione ações internas (follow-up, fechar) dentro do drawer para manter o fluxo completo.

Fluxo completo de lista + drawer de detalhes

Proto-Typed
Loading DSL editor...

Por quê: mantém a lista principal visível enquanto o drawer exibe detalhes e ações contextuais.

Depuração rápida

  • Drawer não abre → verifique se o CTA aponta para CustomerDetail exatamente.
  • Props não aparecem → valide a ordem dos valores nas linhas da lista.
  • Ações internas não fecham → use @ghost[Fechar](close) ou @ghost[Cancelar](close).
  • Overflow de conteúdo → aplique container ou stack dentro do drawer para controlar espaçamento.
  • Lista com ações inline → mova botões para dentro do componente ou para row-end.

Próximos passos