SidebarContainer

O componente SidebarContainer é um sidebar genérico que desliza a partir do lado direito da tela com overlay e animações suaves. Ele suporta cabeçalho, conteúdo, footer e é altamente customizável através de classes CSS e props.

Exemplo

Sidebar com Formulário

Um sidebar simples com um formulário de contato que pode ser aberto/fechado.

Uso: Ideal para formulários, cadastros rápidos e configurações compactas que não necessitam ocupar a tela inteira.

Clique para visualizar o código

vue

<script setup>
import { ref } from 'vue';
import LxSidebarContainer from '@/components/LxSidebarContainer/LxSidebarContainer.vue';
import LxButton from '@/components/LxButton/LxButton.vue';

const sidebarOpen = ref(false);
const formData = ref({
	name: '',
	email: '',
	message: ''
});

const handleClose = () => {
	sidebarOpen.value = false;
};

const handleSubmit = () => {
	console.log('Form submitted:', formData.value);
	sidebarOpen.value = false;
	formData.value = { name: '', email: '', message: '' };
};
</script>

<template>
	<div class="examples-container">
		<div class="example-section">
			<h4 class="mb-3">Sidebar com Formulário</h4>
			<p class="text-muted small mb-3">Um sidebar simples com um formulário de contato que pode ser aberto/fechado.</p>

			<button class="btn btn-primary btn-sm mb-3" @click="sidebarOpen = true">Abrir Sidebar</button>

			<LxSidebarContainer v-if="sidebarOpen" id="example-sidebar" title="Entre em Contato" close-on-backdrop @close="handleClose">
				<template #body>
					<form class="p-4" @submit.prevent="handleSubmit">
						<div class="mb-3">
							<label class="form-label">Nome completo</label>
							<input v-model="formData.name" type="text" class="form-control" placeholder="Seu nome" required />
						</div>

						<div class="mb-3">
							<label class="form-label">E-mail</label>
							<input v-model="formData.email" type="email" class="form-control" placeholder="seu.email@exemplo.com" required />
						</div>

						<div class="mb-4">
							<label class="form-label">Mensagem</label>
							<textarea v-model="formData.message" class="form-control" rows="6" placeholder="Sua mensagem aqui..." required></textarea>
						</div>
					</form>
				</template>

				<template #footer>
					<div class="d-flex gap-2">
						<LxButton id="sidebar-btn-cancel" severity="secondary" @click="handleClose">Cancelar</LxButton>
						<LxButton id="sidebar-btn-confirm" severity="primary" @click="handleSubmit">Enviar</LxButton>
					</div>
				</template>
			</LxSidebarContainer>

			<div class="bg-light p-3 rounded small">
				<strong>Uso:</strong> Ideal para formulários, cadastros rápidos e configurações compactas que não necessitam ocupar a tela inteira.
			</div>
		</div>
	</div>
</template>

<style scoped>
.examples-container {
	padding: 2rem 0;
}

.example-section {
	border: 1px solid var(--lx-silver-100);
	border-radius: 8px;
	padding: 1.5rem;
	background: #fff;
}
</style>

Props

Property	Descrição	Tipo	Padrão
id	Identificador único do sidebar	`String`	`'lx-sidebar'`
title	Título exibido no header	`String`	`undefined`
maxWidth	Largura máxima do sidebar	`String`	`480px`
closeOnBackdrop	Emite o evento `close` quando o usuário clica no backdrop (overlay)	`Boolean`	`false`
teleportToBody	Renderiza o sidebar diretamente no `<body>` usando Vue Teleport	`Boolean`	`false`
classesConfig	Objeto com configurações de classes CSS	`Object`	`{}`
classesConfig.icon	Ícone para fechar o sidebar	`String`	`'times'`
classesConfig.footer	Classes CSS para o footer	`String`	`'d-flex align-items-center justify-content-end gap-2 px-2'`
classesConfig.container	Classes CSS para o container	`String`	`''`
classesConfig.overlay	Classes CSS para o overlay	`String`	`''`
classesConfig.sidebar	Classes CSS para o sidebar	`String`	`''`

Atributos de Estilo

O componente aceita atributos inline via v-bind, permitindo customização direta do elemento <aside>:

vue

<LxSidebarContainer
  title="Meu Sidebar"
/>

Slots

Slot	Descrição
#body	Conteúdo principal do sidebar
#footer	Conteúdo do rodapé (botões, ações)
#extras	Slot adicional para conteúdo extra

Emits

Event	Descrição
@close	Disparado quando o sidebar é fechado

Exemplos de Uso

Básico

vue

<template>
  <LxSidebarContainer
    title="Meu Sidebar"
    @close="handleClose"
  >
    <template #body>
      <p>Conteúdo do sidebar</p>
    </template>
  </LxSidebarContainer>
</template>

Playground Interativo

Título:Largura Máxima:

Fechar ao clicar no backdrop

Teleport para body

Clique para visualizar o código

vue

<script setup>
import { ref } from 'vue';
import LxSidebarContainer from '@/components/LxSidebarContainer/LxSidebarContainer.vue';
import LxButton from '@/components/LxButton/LxButton.vue';

const sidebarOpen = ref(false);
const title = ref('Playground Sidebar');
const maxWidth = ref('480px');
const closeOnBackdrop = ref(true);
const teleportToBody = ref(true);

const handleClose = () => {
	sidebarOpen.value = false;
};

const handleConfirm = () => {
	console.log('Confirmado!');
	sidebarOpen.value = false;
};
</script>

<template>
	<div class="container-fluid">
		<div class="d-flex flex-column gap-4 mb-4">
			<div class="d-flex flex-column align-items-start gap-1">
				<label for="title" class="form-label">Título:</label>
				<input id="title" v-model="title" type="text" class="form-control mb-2" />

				<label for="maxWidth" class="form-label">Largura Máxima:</label>
				<input id="maxWidth" v-model="maxWidth" type="text" class="form-control mb-2" placeholder="480px" />

				<div class="form-check d-flex align-items-center gap-2">
					<input id="closeOnBackdrop" v-model="closeOnBackdrop" type="checkbox" class="form-check-input" />
					<label for="closeOnBackdrop" class="form-check-label">Fechar ao clicar no backdrop</label>
				</div>
			</div>

			<div class="form-check d-flex align-items-center gap-2">
				<input id="teleportToBody" v-model="teleportToBody" type="checkbox" class="form-check-input" />
				<label for="teleportToBody" class="form-check-label">Teleport para body</label>
			</div>

			<button class="btn btn-primary mt-3" @click="sidebarOpen = true">Abrir Sidebar</button>
		</div>
		<LxSidebarContainer
			v-if="sidebarOpen"
			id="playground-sidebar"
			:title="title"
			:max-width="maxWidth"
			:close-on-backdrop="closeOnBackdrop"
			:teleport-to-body="teleportToBody"
			@close="handleClose"
		>
			<template #body>
				<div class="p-4">
					<h5 class="mb-3">Conteúdo do Sidebar</h5>
					<p class="text-muted">Este é um exemplo de playground do LxSidebarContainer com LxButton no footer.</p>
					<div class="mt-4 p-3 bg-light rounded"><strong>Título atual:</strong> {{ title }}</div>
				</div>
			</template>

			<template #footer>
				<div class="d-flex gap-2">
					<LxButton severity="secondary" @click="handleClose">Cancelar</LxButton>
					<LxButton severity="primary" @click="handleConfirm">Confirmar</LxButton>
				</div>
			</template>
		</LxSidebarContainer>
	</div>
</template>

<style scoped>
.container-fluid {
	padding: 1rem 0;
}
</style>

Casos de Uso

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

Formulários: Exibir formulários complexos em um painel lateral
Menus de Navegação: Criar menus deslizantes para aplicações mobile-first
Configurações: Centralizar configurações do usuário em um sidebar
Confirmações: Exibir diálogos de confirmação de forma não-intrusiva
Filtros Avançados: Manter filtros e buscas em um painel dedicado

SidebarContainer ​

Exemplo ​

Sidebar com Formulário

Props ​

Atributos de Estilo ​

Slots ​

Emits ​

Exemplos de Uso ​

Básico ​

Playground Interativo ​

Casos de Uso ​