FloatingAssistant

Floating Assistant é um componente flutuante que pode ser utilizado para fornecer dicas de usabilidade ou informações específicas sobre o conteúdo da página.

---

Quando usar:

• Houver necessidade de fornecer dicas ou informações adicionais sobre um determinado elemento ou seção da página.
• For necessário direcionar o usuário para uma página externa que contenha informações/tutoriais adicionais sobre o conteúdo.
• O objetivo for reduzir a quantidade de informações exibidas na tela, mantendo o foco do usuário no elemento relevante.

Quando não usar:

• O componente se tornar intrusivo e atrapalhar a navegação e experiência do usuário.
• Não houver espaço suficiente para exibição do componente e ele puder ser confundido com o conteúdo da página.

---

Uso

<CdsFloatingAssistant
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="floatingAssistantClick = true"
/>

---

Preview

FloatingAssistant target

Nova funcionalidade! Clique para mais informações

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* modelValue (required)	boolean	true	--	Representa o estado do componente. Quando 'false' o componente não é mostrado e quando 'true' o componente é exibido.
title	string	'Nova funcionalidade!'	--	O título do card flutuante que é exibido.
startOnScroll	boolean	false	--	Define se a animação de exibição do componente vai começar apenas após a ação de scroll pelo usuário.
url	string	''	--	A url para redirecionar para uma página externa ao clicar no 'clicando aqui' para saber mais sobre o que é descrito no card
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante da Badge. São 9 variantes: 'turquoise', 'green', 'blue', 'violet', 'pink', 'red', 'orange', 'amber' e 'gray'.
targetId	string	''	--	Id do elemento que será referência para a renderização do FloatingAssistant.

Eventos

Nome	Descrição
@expanded	Evento emitido quando o componente é exibido ('true') ou ocultado ('false').
@disable-tip	Evento que indica que a opção de desativar a dica foi selecionada

Slots

Nome	Descrição
#default	Slot usado para inserção de conteúdo dentro do card do FloatingAssistant