Base Layout

Visão geral

O Base Layout é um componente fundamental que fornece uma estrutura consistente para todas as páginas e produtos de nossa vertical. Este componente serve como a base sobre a qual construímos nossas interfaces, garantindo a consistência visual e funcional em toda a aplicação.

Página

Ajuda

Titulo da página

Um bom subtítulo da página vai aqui.

Aqui vai um conteúdo, podendo ser um formulário, uma tabela ou até mesmo um texto corrido

Clique para visualizar o código

<script setup>
import { LxBaseLayout } from '@lde/lxcomponents';
</script>

<template>
	<LxBaseLayout>
		<template #navbar>
			<div class="flex-grow-1">Página</div>
			<div>
				<a href="#" class="btn btn-default" title="Dúvidas? Clique aqui"> Ajuda </a>
			</div>
		</template>
		<template #header>
			<div class="d-flex align-items-center">
				<div class="flex-grow-1">
					<h5 class="m-0">Titulo da página</h5>
				</div>
			</div>
			<div class="fs-7 mt-0 mb-2">Um bom subtítulo da página vai aqui.</div>
		</template>
		<template #content>
			<p class="py-3">Aqui vai um conteúdo, podendo ser um formulário, uma tabela ou até mesmo um texto corrido</p>
		</template>
		<template #footer>
			<button type="button" class="btn btn-terciary me-2">Voltar</button>
			<button type="button" class="btn btn-primary">Salvar</button>
		</template>
	</LxBaseLayout>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
hideNavbar	Define se a barra de navegação será escondida	Boolean	false
hideFooter	Define o rodapé será escondido	Boolean	false

Slots

Nome	Descrição
navbar	Conteúdo que será exibido na barra de navegação. Geralmente é um logo, titulo, menu e/ou botão de voltar. Ele é fixo na tela.
header	⚠️ obr Conteúdo que será exibido no cabeçalho da página. Na maioria dos casos consiste de um titulo, subtitulo e botões/abas de navegação. Ele é fixo na tela.
content	⚠️ obr Conteúdo principal da tela. Ele tem um scroll interno.
footer	Conteúdo do rodapé da pagina. Geralmente se coloca aqui os botões de ações gerais, como salvar, voltar etc...
extra	Conteúdo que fica escondido do usuário até ele interagir. Por exemplo: Modais, sidebar, e outros componentes.