{{ launchMatrixTitle }}
{{ launchMatrixLead }}
| {{ isPortuguese ? 'Cenário' : 'Scenario' }} | {{ isPortuguese ? 'Ação' : 'Action' }} | {{ isPortuguese ? 'API principal' : 'Primary API' }} | {{ isPortuguese ? 'Leitura de uso' : 'Usage note' }} |
|---|---|---|---|
|
{{ basicTitle }}
{{ basicBody }}
|
verticalCenter, enableShadow |
{{ isPortuguese ? 'Ponto de partida para diálogos simples com identidade visual.' : 'Starting point for simple dialogs with visual identity.' }} | |
|
{{ iconifiedCardTitle }}
{{ iconifiedCardBody }}
|
headerColor, projeção livre de conteúdo |
{{ isPortuguese ? 'Bom para mensagens com status, checklist e CTA forte.' : 'Good for status messages, checklists, and a strong CTA.' }} | |
|
{{ backdroplessCardTitle }}
{{ backdroplessCardBody }}
|
enableBackdrop |
{{ isPortuguese ? 'Útil em áreas controladas onde o contexto ao fundo ainda importa.' : 'Useful in controlled areas where the background context still matters.' }} | |
|
{{ scrollableCardTitle }}
{{ scrollableCardBody }}
|
dialogScrollable, size="large" |
{{ isPortuguese ? 'Mantém o cabeçalho fixo quando o corpo cresce.' : 'Keeps the header fixed when the body grows.' }} | |
|
{{ smallHeaderCardTitle }}
{{ smallHeaderCardBody }}
|
smallHeader |
{{ isPortuguese ? 'Aproxima o modal de layouts mais densos sem perder legibilidade.' : 'Brings the modal closer to denser layouts without losing readability.' }} | |
|
{{ formCardTitle }}
{{ formCardBody }}
|
size="large", projeção de formulário |
{{ isPortuguese ? 'Serve de base para formulários curtos e médios.' : 'Works as a base for short and medium-length forms.' }} | |
|
{{ fullTitle }}
{{ fullBody }}
|
size="fluid", fullScreenOnMobile |
{{ isPortuguese ? 'Chega perto do fullscreen no desktop e ainda respeita a altura da janela.' : 'Gets close to fullscreen on desktop while still respecting viewport height.' }} | |
|
{{ fullScreenCardTitle }}
{{ fullScreenCardBody }}
|
size="modal-full", smallHeader |
{{ isPortuguese ? 'Quando o modal vira shell de trabalho e precisa de rolagem longa no body.' : 'When the modal becomes a work shell and needs a long scrolling body.' }} | |
|
{{ lockedTitle }}
{{ lockedBody }}
|
closeOnBackdropClick, closeOnEscape, enableCloseBtn |
{{ isPortuguese ? 'Modelo para confirmações obrigatórias e estados críticos.' : 'Template for mandatory confirmations and critical states.' }} | |
|
{{ lazyTitle }}
{{ lazyBody }}
|
lazyContent |
{{ isPortuguese ? 'Ideal para grids, gráficos e componentes com montagem custosa.' : 'Ideal for grids, charts, and components with expensive mounting.' }} |
{{ sizeShowcaseTitle }}
{{ sizeShowcaseIntro }}
{{ sizeTitle(item) }}
{{ sizeDescription(item) }}
{{ sizeUseCaseLabel }}: {{ sizeUseCase(item) }}
{{ implementationPatternsTitle }}
{{ implementationPatternsIntro }}
{{ implementationCardOneTitle }}
{{ implementationCardOneBody }}
{{ implementationCardTwoTitle }}
{{ implementationCardTwoBody }}
{{ implementationCardThreeTitle }}
{{ implementationCardThreeBody }}
{{ apiIntro }}
{{ mainInputsTitle }}
title-text,headerColoresizedefinem a estrutura principal.sizeaceitadefault,modal-xs,modal-sm,large,xtra-large,xx-large,xxx-large,fluidemodal-full.fullScreenShellsó atua comsize="modal-full"e troca o visual de cartão arredondado por um shell fullscreen sem cantos.lazyContent,dialogScrollable,verticalCenter,compactHeaderesmallHeadercontrolam comportamento interno.closeOnBackdropClick,closeOnEscape,enableCloseBtn,enableBackdrop,enableHeaderefullScreenOnMobilerefinam UX e encerramento.
{{ behaviorApiTitle }}
open()eclose()controlam o ciclo de vida de forma imperativa.start-openinicializa o modal já aberto quando o fluxo pede atenção imediata.enableShadowajuda a destacar o bloco em páginas densas.modal-fulljá ocupa100vw x 100dvh;fullScreenShellnão aumenta o tamanho, só remove o visual de modal-cartão e deixa o componente com cara de tela inteira.
{{ outputsApiTitle }}
(close)dispara sempre que o modal termina o fechamento.- O host decide como reagir: limpar estado, recarregar dados ou registrar auditoria.
- Conteúdo pesado deve preferir
lazyContentpara não nascer fechado no DOM. - Fluxos estilo Bootbox podem ser compostos no host usando
@ViewChilde handlers próprios.
{{ supportMatrixTitle }}
{{ supportMatrixLead }}
| {{ sizeValueLabel }} | {{ sizeWidthLabelTitle }} | {{ sizeUseCaseLabel }} |
|---|---|---|
{{ sizeValueChip(item) }} |
{{ sizeWidthLabel(item) }} | {{ sizeUseCase(item) }} |