{{ overviewIntro }}

{{ basicTitle }}

{{ basicBody }}

Scrollable

{{ scrollableCardBody }}

{{ warningCardTitle }}

{{ warningCardBody }}

{{ iconifiedCardTitle }}

{{ iconifiedCardBody }}

{{ miniCardTitle }}

{{ miniCardBody }}

{{ backdroplessCardTitle }}

{{ backdroplessCardBody }}

{{ smallHeaderCardTitle }}

{{ smallHeaderCardBody }}

{{ formCardTitle }}

{{ formCardBody }}

{{ fullTitle }}

{{ fullBody }}

{{ fullScreenCardTitle }}

{{ fullScreenCardBody }}

{{ lockedTitle }}

{{ lockedBody }}

Lazy content

{{ lazyBody }}

{{ modalEventLog }}

{{ apiIntro }}

{{ mainInputsTitle }}
  • title-text, headerColor e size definem a estrutura principal.
  • lazyContent, dialogScrollable, verticalCenter, compactHeader e smallHeader cobrem comportamento.
  • closeOnBackdropClick, enableCloseBtn, enableBackdrop, enableHeader e fullScreenOnMobile refinam a UX.
{{ basicSnippetTitle }}
{{ advancedSnippetTitle }}
Full screen
Small header
{{ t.pages.modal.modalHeading }}

{{ t.pages.modal.modalBody }}

{{ t.pages.modal.scrollableBody }}

{{ t.pages.modal.scrollableLine(index) }}

{{ warningModalBody }}

{{ iconifiedModalLead }}
Checklist rápido
Validação documental concluída e pronta para seguir.
Existem observações pendentes antes da publicação final.

{{ miniModalBody }}

{{ backdroplessModalBody }}

{{ smallHeaderModalBody }}

Densidade visual
Header menor, mesmo comportamento de cor, bordas e fechamento.

{{ formModalLead }}

{{ fullSequenceTitle }}
{{ i + 1 }}
{{ step }}
{{ fullWhenToUseTitle }}

{{ fullWhenToUseBody }}

{{ lockedModalBody }}

{{ lazyProofTitle }}
  • {{ item }}
Limitless-inspired demo
{{ fullScreenLead }}

Este exemplo replica um cadastro administrativo com muitas entradas para evidenciar a rolagem do body no modo full.

modal-full smallHeader lazyContent
Dados CGM
Dados endereço
Dados contato
Atributos