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