MeSidebarSectionViewer

Layout com menu lateral e área de conteúdo. As seções são definidas declarativamente com MeSidebarSection passado no slot default.

Playground

Importação

Vue 3

<script setup>
import { MeSidebarSectionViewer, MeSidebarSection } from '@me/ui-vue3'
</script>

Uso Básico

Conteúdo de configurações.

Conteúdo do perfil.

Conteúdo de notificações.

<MeSidebarSectionViewer>
  <MeSidebarSection icon="settings" title="Configurações">
    <p>Conteúdo de configurações.</p>
  </MeSidebarSection>
  <MeSidebarSection icon="person" title="Perfil">
    <p>Conteúdo do perfil.</p>
  </MeSidebarSection>
  <MeSidebarSection icon="notifications" title="Notificações">
    <p>Conteúdo de notificações.</p>
  </MeSidebarSection>
</MeSidebarSectionViewer>

Com Título

Minha Conta

Atualize seus dados pessoais aqui.

Gerencie sua senha e autenticação.

<MeSidebarSectionViewer title="Minha Conta">
  <MeSidebarSection icon="manage_accounts" title="Dados pessoais">
    <p>Atualize seus dados pessoais aqui.</p>
  </MeSidebarSection>
  <MeSidebarSection icon="lock" title="Segurança">
    <p>Gerencie sua senha e autenticação.</p>
  </MeSidebarSection>
</MeSidebarSectionViewer>

Sem Borda

Ajuste as suas preferências.

Personalize a aparência do sistema.

<MeSidebarSectionViewer :bordered="false">
  <MeSidebarSection icon="tune" title="Preferências">
    <p>Ajuste as suas preferências.</p>
  </MeSidebarSection>
  <MeSidebarSection icon="palette" title="Aparência">
    <p>Personalize a aparência do sistema.</p>
  </MeSidebarSection>
</MeSidebarSectionViewer>

Seção com Altura Controlada

Use minHeight e maxHeight no MeSidebarSection para controlar a altura da área de conteúdo.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Conteúdo curto.

<MeSidebarSectionViewer>
  <MeSidebarSection icon="list" title="Lista longa" minHeight="300px">
    <p v-for="i in 10" :key="i">Item {{ i }}</p>
  </MeSidebarSection>
  <MeSidebarSection icon="notes" title="Resumo">
    <p>Conteúdo curto.</p>
  </MeSidebarSection>
</MeSidebarSectionViewer>

Evento section-change

Seção ativa: 0

Página inicial.

Sobre o sistema.

Central de ajuda.

<script setup>
import { ref } from 'vue'
const activeSection = ref(0)
</script>

<template>
  <MeSidebarSectionViewer
    :activeIndex="activeSection"
    @section-change="activeSection = $event"
  >
    <MeSidebarSection icon="home" title="Início">
      <p>Página inicial.</p>
    </MeSidebarSection>
    <MeSidebarSection icon="info" title="Sobre">
      <p>Sobre o sistema.</p>
    </MeSidebarSection>
    <MeSidebarSection icon="help" title="Ajuda">
      <p>Central de ajuda.</p>
    </MeSidebarSection>
  </MeSidebarSectionViewer>
</template>

API

MeSidebarSectionViewer — Props

Prop	Tipo	Padrão	Descrição
title	string	-	Título exibido no cabeçalho
bordered	boolean	true	Exibe borda ao redor do componente
activeIndex	number	0	Índice da seção ativa inicial

MeSidebarSectionViewer — Eventos

Evento	Payload	Descrição
section-change	number	Emitido ao selecionar uma seção. Payload = índice da seção

MeSidebarSectionViewer — Slots

Nome	Descrição
default	Um ou mais MeSidebarSection. Ficam ocultos no DOM e registram-se via provide/inject

MeSidebarSection — Props

Prop	Tipo	Padrão	Descrição
icon	string	'info'	Nome do ícone Material Icons
title	string	-	Título da seção, exibido no menu e no cabeçalho do conteúdo
minHeight	string	-	Altura mínima CSS da área de conteúdo (ex: '300px')
maxHeight	string	-	Altura máxima CSS da área de conteúdo (ex: '500px')

MeSidebarSection — Slots

Nome	Descrição
default	Conteúdo exibido na área direita quando a seção está ativa