Pharos
Navegar componentes
← Componentes

Layout

LayoutExemplo
Layout fornece componentes composáveis para construir shells de página estruturados com slots de header, sidebar, content e footer. Use Layout para layouts completos de app e HStack/VStack para empilhamento direcional simples.
Importação
import {Layout} from '@pharos-ds/core/Layout';

Exemplos

Área interativa

height
Cabeçalho
Painel
Conteúdo principal
Rodapé
Código
import {Layout} from '@pharos-ds/core/Layout';

<Layout
  height="fill"
 />

Boas práticas

  • Faça: Use Layout para shells de página que precisam de zonas distintas como header, sidebar(s), content e footer.
  • Faça: Use HStack e VStack para empilhamento direcional simples dentro de uma área de conteúdo.
  • Evite: Use Layout para layouts de empilhamento simples; use HStack ou VStack.
  • Evite: Aninhe múltiplos componentes Layout; use um por shell de página e componha conteúdo dentro de seus slots.

Props

PropTipoPadrãoDescrição
contentReactNode—Área de conteúdo principal (centro). Children passados para `<Layout>` também renderizam aqui: `<Layout>{main}</Layout>` é atalho para `<Layout content={main} />`.
headerReactNode—Slot de header.
footerReactNode—Slot de footer.
startReactNode—Painel start (esquerda em LTR).
endReactNode—Painel end (direita em LTR).
height'fill' | 'auto''fill'Comportamento de altura: preencher o container ou crescer com o conteúdo.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Layout
Layout · Pharos