SideSheet

SideSheets são painéis que surgem do lado direito da tela. De modo semelhante aos Modais, são úteis quando se precisa que os usuários concluam executem ações sem perder o contexto da página atual.

---

Quando usar:

• Para criar filtros com muitos campos sobre o conteúdo mostrado na página.
• Para criar formulários mantendo o conteúdo principal da página visível.
• Para mostrar informações detalhadas sobre determinado item da página.

Quando não usar:

• Quando o conteúdo do SideSheet não for relacionado com o conteúdo da página.
• Não use SideBars como solução de navegação vertical.

Observações:

• ⚠️ Este componente foi projetado apenas para usos em desktops e tablets.

---

Uso

<CdsSideSheet
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="sideSheetClick = true"
/>

---

Preview

---

Props

Nome	Tipo	Default	Opções	Descrição
title	string	null	--	Define o título do SideSheet.
* modelValue (required)	boolean	false	--	Prop utilizada como v-model. Controla a visilidade do SideSheet.
withOverlay	boolean	false	--	Indica se vai ser usado overlay junto ao SideSheet.
size	string	'md'	sm md lg xl	Especifica o tamanho do SideSheet. São 4 tamanhos implementados: 'sm', 'md', 'lg', 'xl'.
noCloseOnBackdrop	boolean	false	--	Define se o SideSheet vai ser fechado com o click no backdrop.
noCloseOnEsc	boolean	false	--	Define se o SideSheet vai ser fechado quando o usuário pressionar 'ESC'.
actionButtonVariant	string	'green'	green teal blue indigo violet pink red orange amber dark	Define a variante do botão de ação do SideSheet (segue as variantes do componente de botão do Cuida)
noFooter	boolean	false	--	Controla a exibição do rodapé (footer) do SideSheet.
noCancelButton	boolean	false	--	Controla a exibição do botão de cancelar do SideSheet.
disableOkButton	boolean	false	--	Define o estado do botão de ação do SideSheet.
disableCancelButton	boolean	false	--	Define o estado do botão de cancelar do SideSheet.
okButtonText	boolean	false	--	Define texto do botão de ação do SideSheet
cancelButtonText	boolean	false	--	Define texto do botão de cancelar do SideSheet
blockOkButton	boolean	false	--	Altera o tipo de botão de confirmação para block
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.

Eventos

Nome	Descrição
@update:modelValue	Evento utilizado para implementar o v-model.
@cancel	Evento que indica se o botão de cancelar do SideSheet foi clicado.
@close	Evento que indica se a SideBar foi fechada.
@ok	Evento que indica se o botão de ação do SideSheet foi clicado.

Slots

Nome	Descrição
#header	Slot usado para utilização de header customizado.
#default	Slot usado para mostrar o conteúdo dentro do componente.
#footer	Slot usado para inserção de footer customizado.