TruncateContainer

TruncateContainer é um componente utilizado para controlar a visibilidade de conteúdos longos.

---

Quando usar:

• Quando o conteúdo pode ser muito grande e você quer limitar a altura inicial.
• Para indicar visualmente que há mais conteúdo disponível para leitura.

Quando não usar:

• Quando todo o conteúdo precisa estar visível imediatamente.
• Se não houver necessidade de interação do usuário para expandir o conteúdo.

---

Uso

<CdsTruncateContainer
	height="250px"
	text-align="center"
	variant="dark"
>
	<ul>
		<li v-for="n in 25">List Item {{n}}</li>
	</ul>
</CdsTruncateContainer>

---

Preview

• List Item 1
• List Item 2
• List Item 3
• List Item 4
• List Item 5
• List Item 6
• List Item 7
• List Item 8
• List Item 9
• List Item 10
• List Item 11
• List Item 12
• List Item 13
• List Item 14
• List Item 15
• List Item 16
• List Item 17
• List Item 18
• List Item 19
• List Item 20
• List Item 21
• List Item 22
• List Item 23
• List Item 24
• List Item 25

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
height	string	'250px'	--	Altura do container.
textAlign	string	'center'	start center end	Define o alinhamento do texto.
variant	string	'dark'	green teal turquoise blue indigo violet pink red orange amber e dark.	A variante da FlatButton. São 9 variantes.

Events

Nome	Descrição
@button-click	Evento emitido quando o FlatButton do TruncateContainer é clicado.
@expand	Evento emitido o TruncateContainer é expandido.
@collapse	Evento emitido o TruncateContainer é colapsado.

## Slots

Nome	Descrição
#default	Slot padrão utilizado para exibir o conteúdo enviado para o container

---