Modal
No Kósmos, o Modal é um contêiner posicionado em uma camada inferior usado para envolver e padronizar a estrutura visual de experiências focadas.
Uso
O componente de Modal deve ser utilizado como o background padronizado para a construção de experiências que exijam a atenção focada do usuário, como dialogs de confirmação ou outras composições de componentes que dependam de uma área dedicada. Ele garante o padrão de elevação e background.
Anatomia
❖. Container
Estrutura externa que agrupa todos os elementos internos do componente. Para o container deve ser aplicado o componente de modal que padroniza a aplicação do BG e definições de elevation para estes componentes.
Padding
O espaçamento entre o Container e o conteúdo interno deve ser definido pela variável de espaçamento Container Margin em todas as bordas.
Posicionamento
O Modal deve ser centralizado vertical e horizontalmente na viewport. Ele sempre vai estar acima de qualquer outro componente da tela. Não deve haver Modals múltiplos ou sobrepostos.
Comportamento
Abertura e Fechamento
Deve ter uma transição suave (ex: fade in/out) para indicar que é um elemento que surge sobre a interface e deve fechar e ser removido da viewport na interação de clique fora dos limites do container e o pressionamento da tecla ESC.
Scroll
O Modal não deve rolar com o conteúdo da página, mas deve permanecer centralizado. Se o conteúdo do Modal for maior que a tela, apenas o conteúdo interno deve ter scroll.
Use cases
Histórico de Atualizações
Atualizado