MeMainContentLayout

Layout principal de conteúdo com suporte a page alert fixo no topo, breadcrumbs, header configurável e área de conteúdo principal.

Playground

Importação

<script>
import { MeMainContentLayout } from '@/components/global/utils/export/index'
</script>

Uso Básico

Título da PáginaSubtítulo opcional

Conteúdo principal

<MeMainContentLayout title="Título da Página" subtitle="Subtítulo opcional">
  <template #body>
    <div>Conteúdo principal</div>
  </template>
</MeMainContentLayout>

Slot Default

Use o slot default para inserir conteúdo diretamente, sem precisar do <template #body>. O conteúdo recebe padding de 24px automaticamente.

Título da Página

Conteúdo com padding automático

<MeMainContentLayout title="Título da Página">
  <div>Conteúdo com padding automático</div>
</MeMainContentLayout>

Use content-padding para customizar o valor. Passe "0" para conteúdo fluido (tabelas, mapas, imagens full-width).

Tabela Full-Width

Conteúdo sem padding — ocupa toda a largura do card

<!-- sem padding -->
<MeMainContentLayout title="Tabela Full-Width" content-padding="0">
  <MyTable />
</MeMainContentLayout>

<!-- padding customizado -->
<MeMainContentLayout title="..." content-padding="16px 32px">
  conteúdo
</MeMainContentLayout>

Sem Header

Não passe title nem subtitle para ocultar completamente o header.

Conteúdo sem header

<MeMainContentLayout>
  <template #body>
    <div>Conteúdo sem header</div>
  </template>
</MeMainContentLayout>

Header fora do body

Quando headerOutsideBody=true, o título e subtítulo ficam acima do card body.

Título Externo

Fora do card

Conteúdo sem header no card

<MeMainContentLayout
  title="Título Externo"
  subtitle="Fora do card"
  :header-outside-body="true"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Com Breadcrumbs

A prop breadcrumbs exibe uma trilha de navegação acima do header.

• Home chevron_right
• Licitações chevron_right
• Detalhe

Detalhe

Conteúdo com breadcrumbs

<MeMainContentLayout
  title="Detalhe"
  :breadcrumbs="[
    { label: 'Home', to: '/' },
    { label: 'Licitações', to: '/licitacoes' },
    { label: 'Detalhe' }
  ]"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Page Alert

O page alert é um banner sticky no topo do layout. Suporta mensagem HTML, ícone e botão de ação.

Atenção: prazo se encerrando em 2 dias.

Com Alerta

Conteúdo com alerta ativo

<MeMainContentLayout
  title="Com Alerta"
  :page-alert="{ message: 'Atenção: prazo se encerrando em <strong>2 dias</strong>.', color: 'blue-primary' }"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Com ícone

Use pageAlert.icon para exibir um ícone à esquerda da mensagem. Aceita qualquer prop do MeIcon — icon define o nome (Material Icon ou ícone customizado) e color define a cor.

info

Informamos que a plataforma ficará indisponível no sábado para manutenção.

Com Ícone no Alerta

Conteúdo da página

<MeMainContentLayout
  title="Com Ícone no Alerta"
  :page-alert="{
    message: 'Informamos que a plataforma ficará indisponível no sábado para manutenção.',
    color: 'blue-primary',
    icon: { icon: 'info', color: '#fff' }
  }"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Com botão e evento @page-alert-button-click

Use pageAlert.button para exibir um botão de ação. O evento @page-alert-button-click é emitido quando ele é clicado — ideal para dispensar o alerta ou redirecionar o usuário.

Manutenção programada para sábado às 22h.

Com Botão no Alerta

Conteúdo da página

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

<MeMainContentLayout
  title="Com Botão no Alerta"
  :page-alert="showAlert ? {
    message: 'Manutenção programada para sábado às 22h.',
    color: 'red-primary',
    button: { label: 'Dispensar', variant: 'red', invertedColor: true }
  } : null"
  @page-alert-button-click="showAlert = false"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Com botão de fechar (closeable)

Use pageAlert.closeable: true para exibir um botão X dedicado no canto direito do alerta. O evento @page-alert-close é emitido quando o usuário clica em fechar. A mensagem encolhe automaticamente sem empurrar o botão para baixo.

Use pageAlert.closeButtonColor para customizar a cor do ícone de fechar quando o fundo do alerta for diferente do padrão branco. O padrão é '#fff'.

info

Informamos que a plataforma poderá apresentar intermitências no dia 01/05, das 08h às 12h, devido a uma migração programada.

Com Alerta Fechável

Conteúdo da página

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

<MeMainContentLayout
  title="Com Alerta Fechável"
  :page-alert="showAlert ? {
    message: 'Informamos que a plataforma ficará indisponível no sábado para manutenção.',
    color: 'red-primary',
    icon: { icon: 'info', color: '#fff' },
    closeable: true
  } : null"
  @page-alert-close="showAlert = false"
>
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

Body Transparente

transparentBody=true remove a sombra e o background branco do body. Útil em fundos coloridos.

Layout Transparente

Body sem sombra nem fundo branco

<MeMainContentLayout title="Layout Transparente" :transparent-body="true">
  <template #body>
    <div>Conteúdo</div>
  </template>
</MeMainContentLayout>

API

Props

Prop	Tipo	Padrão	Descrição
breadcrumbs	BreadcrumbItem[]	-	Lista de itens do breadcrumb. Exibido quando há itens.
title	string	''	Título da página.
subtitle	string	''	Subtítulo da página.
pageAlert	PageAlertConfig | null	null	Configuração do alerta sticky no topo. Quando definido, o alerta é exibido. Propriedades: message (string, suporta HTML), icon (MeIconProps), button (MeButtonProps), color (token CSS ou valor direto, padrão 'blue-primary'), closeable (boolean — exibe botão X de fechar que emite pageAlertClose), closeButtonColor (string — cor do ícone de fechar, padrão '#fff').
headerOutsideBody	boolean	false	Posiciona o header acima do card body.
maxWidth	string	'100%'	Largura máxima do layout. Ex: '960px', '80%'.
transparentBody	boolean	false	Remove sombra e background do body.
contentPadding	string	'24px'	Padding do slot default. Ex: '16px', '16px 32px', '0'.

Eventos

Evento	Payload	Descrição
pageAlertButtonClick	-	Emitido quando o botão do page alert é clicado.
pageAlertClose	-	Emitido quando o botão de fechar (closeable: true) do page alert é clicado.

Slots

Nome	Descrição
default	Conteúdo principal com padding automático (24px). Controlado pela prop noPadding.
body	Conteúdo principal sem wrapper — acesso direto ao body para controle total.
pageAlert	Substitui o conteúdo padrão do alerta. Renderizado quando pageAlert não é null.
breadcrumbs	Substitui o MeBreadcrumbs padrão.
header	Substitui o header padrão (title + subtitle).

Acessibilidade

• O header usa tags semânticas h1 (title) e h2 (subtitle) na versão fora do body
• O page alert é sticky e sempre visível durante o scroll
• O conteúdo HTML do pageAlert.message deve ser sanitizado antes de uso
• O botão de fechar (closeable) possui aria-label="Fechar aviso" e o ícone interno é decorativo (aria-hidden="true")

Atenção

A prop pageAlert.message renderiza HTML via v-html. Garanta que o conteúdo seja de fontes confiáveis para evitar XSS.