Bottom Sheet

BottomSheets são componentes que exibem conteúdo adicional em uma camada sobreposta na parte inferior da página atual, fornecendo acesso rápido a informações ou ações complementares sem interromper o fluxo principal da interface.

---

Quando usar:

• Para fornecer acesso rápido a opções ou controles adicionais sem obscurecer o conteúdo principal da página;
• Quando há necessidade de apresentar informações contextuais relevantes sem exigir uma mudança de contexto para o usuário;
• Para oferecer uma experiência de navegação fluida, permitindo que o usuário permaneça na mesma tela enquanto interage com o conteúdo adicional.

Quando não usar:

• Se o conteúdo ou as ações adicionais exigirem mais espaço do que a área disponível na parte inferior da tela.
• Quando a presença de um BottomSheet interferiria na experiência do usuário ou causaria confusão ao sobrepor-se a outros elementos essenciais da interface.
• Se houver necessidade de exibir uma quantidade significativa de informações ou fluxos complexos que não possam ser adequadamente contidos na parte inferior da tela.

---

Uso

<CdsBottomSheet
	v-model="showBottomSheet"
	title="Onde encontrar o meu CNS"
>
	Conteúdo
</CdsBottomSheet>

---

Preview

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
title	string	'Onde encontrar o meu CNS'	--	Define o título do bottom sheet exibido no header
noCloseOnBackdrop	boolean	false	--	Define se o BottomSheet vai ser fechado com o click no backdrop.

Eventos

Nome	Descrição
@update:model-value	Evento emitido quando a visibilidade do bottom sheet é alterada.
@close	Evento emitido quando o bottom sheet é fechado.

Slots

Nome	Descrição
#default	Scoped slot usado para inserção de conteúdo customizado.