List

O componente List é utilizado para exibir uma listagem de itens com um título e um conteúdo, permitindo personalização através de slots.

Quando usar:

Para exibir listas de itens com título e conteúdo de forma padronizada.
Quando for necessário permitir a personalização da exibição dos itens através de slots.
Para criar listagens interativas em aplicações web e mobile.

Se a lista precisar ter uma estrutura altamente customizada e dinâmica, onde um componente mais flexível como um table ou grid seria mais adequado.
Quando não há necessidade de interação ou personalização dos itens exibidos.

<CdsList
	:items
	:clickable="false"
>
	<template #actions>
		<CdsIconButton icon="edit-outline" />
	</template>
</CdsList>

Goku o maior de todos os tempos

Todo mundo sabe que ele é o mais forte do mundo (não é atoa o filme 2)

Invejosos dirão que é o Gohan

Mas também todo mundo sabe que ele é um banana depois da saga do Cell

Todo mundo gosta do Vegeta

Claro que sim, não tem como não gostar

Mostrar log

Nome	Tipo	Default	Opções	Descrição
* `items` (required)	array	[]	--	Lista de itens a serem exibidos no componente. Cada item deve seguir o formato padrão: ```js { title: 'Título do item', content: 'Conteúdo do item' } ``` Esse formato permite o uso da listagem no layout padrão, onde cada item será exibido com um título e um conteúdo. Caso deseje utilizar uma estrutura personalizada, você pode fornecer os itens no formato desejado e personalizar a exibição dentro do slot `item`.
`variant`	string	'blue'	`greentealblueindigovioletpinkredorangeamberdark`	A variante de cor do título são 10 variantes implementadas: 'green', 'teal', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.
`clickable`	boolean	false	--	Indica se o componente deve ser clicável ou não.
`padding`	string	'7, 3'	--	Define o valor do padding do item da lista. Os valores são múltiplos de 4px separados por vírgula para vertical e horizontal (ex: '2, 4').

Nome	Descrição
`@click`	Evento que indica que um item da listagem foi clicado. A prop __clickable__ tem que estar definida como __true__.

Nome	Descrição
`#item`	Slot utilizado para renderização de conteúdo de listagem.
`#actions`	Slot utilizado para renderização de botões de ação para listagem desktop.