ScrollableContainer

Visão geral

O componente ScrollableContainer permite criar áreas de rolagem personalizáveis, tanto na direção horizontal quanto vertical. Ele suporta rolagem automática ao atingir as bordas e rolagem por arraste (drag scroll), sendo ideal para casos como carrosséis, abas ou listas extensas.

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxScrollableContainer, LxTabs } from '@lde/lxcomponents';

const tabs = Array.from({ length: 10 }, (_, i) => ({
	id: `tab${i + 1}`,
	label: `Teste de tab ${i + 1}`
}));
const selectedTab = ref(tabs[0].id);
</script>

<template>
	<LxScrollableContainer scroll-direction="horizontal">
		<LxTabs v-model="selectedTab" :options="tabs" :no-wrap="true" />
	</LxScrollableContainer>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
scrollDirection	Define a direção da rolagem. Os valores possíveis são: horizontal ou vertical.	String	horizontal

Slots

Nome	Descrição
default	Conteúdo que será exibido dentro do container rolável. Pode incluir qualquer elemento ou componente.

Aplicações

O ScrollableContainer é útil em diversos cenários, como:

• Carrosséis de conteúdo: Exibir itens horizontalmente com suporte a rolagem suave.
• Listas extensas: Criar listas verticais com rolagem personalizada.
• Abas navegáveis: Usado em conjunto com o componente LxTabs para criar abas roláveis.