Modal

Modais são como dialogs personolizados, janelas que exibem um conteúdo adicional em uma camada acima da página atual, com uma sobreposição de superfície (overlay) cobrindo a página e tornando-a temporariamente inacessível.

---

Quando usar:

• For necessário notificar o usuário de algum processo;
• For necessário uma tomada de decisão para completar uma ação;
• Se deseja realizar ação dentro de uma página paralelo ao fluxo principal da mesma;

Quando não usar:

• For necessário exibir uma grande quantidade de informação ou fluxos complexos;
• For necessário ser usado em conjunto com outros modais e popovers (cascata).

---

Uso

<CdsModal
	v-mode="modelValue" 
	title="Título do modal"
	size="lg"
	disable-ok-button
	disable-cancel-button
	@close="closeHandler"
	@ok="okHandler"
	@cancel="cancelHandler"
>
	<span>
		Mussum Ipsum, cacilds vidis litro abertis. A ordem dos tratores não altera o pão duris.Tá deprimidis,
		eu conheço uma cachacis que pode alegrar sua vidis.Paisis, filhis, espiritis santis.Leite de capivaris,
		leite de mula manquis sem cabeça.
	</span>
</CdsModal>

---

Preview

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* modelValue (required)	boolean	false	--	Controla a exibição do modal.
title	string	'Título'	--	Define o título do modal exibido no header
size	string	'md'	sm md lg xl	Especifica o tamanho do modal. São 3 tamanhos implementados: 'sm', 'md', 'lg' e 'xl'.
disableOkButton	boolean	false	--	Define o estado do botão de ação do modal.
disableCancelButton	boolean	false	--	Define o estado do botão de cancelar do modal.
noCloseOnBackdrop	boolean	false	--	Controla a ação de fechar o modal ao clicar fora.
noCloseOkButton	boolean	false	--	Controla a ação de fechar o modal ao clicar no botão de ação.
noCloseCancelButton	boolean	false	--	Controla a ação de fechar o modal ao clicar no botão de cancelar.
noCloseButton	boolean	false	--	Controla a exibição do botão de fechar do modal.
noCancelButton	boolean	false	--	Controla a exibição do botão de cancelar do modal.
noFooter	boolean	false	--	Controla a exibição do rodapé (footer) do modal.
noHeader	boolean	false	--	Controla a exibição do cabeçalho (header) do modal.
okButtonText	string	'Confirmar'	--	Define texto do botão de ação do modal
cancelButtonText	string	'Cancelar'	--	Define texto do botão de cancelar do modal
actionButtonVariant	string	'green'	green teal blue indigo violet pink red orange amber dark	Define a variante do botão de ação do Modal (segue as variantes do componente de botão do Cuida)
scrollable	boolean	false	--	Define se o conteúdo do modal precisa ser "scrollado" e adiciona um scroll vertical quando a altura máxima é atingida

Eventos

Nome	Descrição
@close
@update:modelValue
@ok
@cancel

Slots

Nome	Descrição
#header	Slot usado para utilização de header customizado.
#default
#footer	Slot usado para inserção de footer customizado.