Popover

Popovers são componentes flutuantes utilizados para exibir, sob interação, informações e ações relacionadas ao conteúdo da tela.

---

Quando usar:

• Para criar dropdowns;
• Para mostrar informações ou ações adicionais sobre determinado elemento da interface;

Quando não usar:

• Como um substituto para Tooltips, ou seja, tendo como conteúdo apenas pequenas porções de texto;
• Como um subistituto para modais;
• Para mostrar informações críticas para o sucesso de uma ação do usuário;

---

Uso

<CdsButton
	id="trigger-cds-popover"
	@click="showPopover = true"
>
	Click
</CdsButton>
<CdsPopover
	rightAligned="false"
	targetId="trigger-cds-popover"
	width="250"
	height="250"
	v-model="showPopover"
>
	<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>
	<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>
</CdsPopover>

---

Preview

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. 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.

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
modelValue	boolean	false	--	Prop utilizada como v-model. controla a exibição do Popover.
width	string|number	250	--	Largura do Popover. A largura mínima é 100px e a máxima é 400px.
fitContentWidth	boolean	false	--	Quando true deixa a largura do popover adaptável ao conteúdo. `Essa prop tem prevalência sobre a prop width!`
height	string|number	200	--	Altura do Popover. A altura máxima é 500px
targetId	string	''	--	Id do elemento que será referência para a renderização do Popover.
rightAligned	boolean	false	--	Quando `true`, alinha o popover à direita do do componente referência (target).
verticalFluid	boolean	false	--	Quando `true`, remove o scroll interno e torna o tamanho do Popover fluido.

Eventos

Nome	Descrição
@update:modelValue	Evento utilizado para implementar o v-model.

Slots

Nome	Descrição
#default	Slot utilizado para renderização do conteúdo do Popover.