Brickslab.

@brickslab/ui-web

Coque d'application complète avec slots pour le header, sidebar, footer et contenu principal. Gère automatiquement les offsets de mise en page basés sur les hauteurs et largeurs configurées.

Aperçu

AppShell complet — conteneur 400px, border, overflow hidden

Contenu principal

Zone centrale gérée par AppShell. Les offsets header, sidebar et footer sont appliqués automatiquement.

sans sidebar

BricksLab
Contenu sans sidebar

Props

PropTypeDéfautRequisDescription
childrenReactNode—✓Contenu principal de l'application, affiché dans la zone centrale.
headerReactNode——Slot pour la barre de navigation principale (HeaderBar ou équivalent).
sidebarReactNode——Slot pour la navigation latérale (SidebarNav ou équivalent).
footerReactNode——Slot pour la barre de pied de page (FooterBar ou équivalent).
sidebarWidthnumber232—Largeur en pixels de la sidebar. Affecte le décalage du contenu principal.
headerHeightnumber60—Hauteur en pixels du header. Affecte le padding-top du contenu principal.
footerHeightnumber60—Hauteur en pixels du footer. Affecte le padding-bottom du contenu principal.

Utilisation

tsx
import { AppShell, HeaderBar, SidebarNav, FooterBar } from "@brickslab/ui-web";

<AppShell
  header={
    <HeaderBar
      logo={<span>BricksLab</span>}
      nav={<nav>...</nav>}
    />
  }
  sidebar={
    <SidebarNav
      sections={[
        { title: "Composants", items: [{ label: "Heading", href: "/components/heading" }] },
      ]}
      activePath="/components/heading"
    />
  }
  footer={
    <FooterBar />
  }
  sidebarWidth={232}
  headerHeight={60}
  footerHeight={60}
>
  <main>
    <p>Contenu principal de l'application</p>
  </main>
</AppShell>