> Pages

Pages

Permet de définir les valeurs de la balise <head> via Expo router. Doit englober toutes les pages. Permet aussi de rendre la page scrollable via l'attribut scrollable. Principalement pour le web.

TagscoreExemples6StylesDisponibles

Default

Contenu de la page

export const Default = () => (
  <Page title="Mon titre" description="Description">
    <Typography>Contenu de la page</Typography>
  </Page>
);

WithOg

Page avec Open Graph personnalisé

export const WithOg = () => (
  <Page title="Mon titre" description="Description" og={{ title: 'OG titre', description: 'OG description' }}>
    <Typography>Page avec Open Graph personnalisé</Typography>
  </Page>
);

WithMetaRobots

Cette page ne sera pas indexée par les moteurs de recherche.

export const WithMetaRobots = () => (
  <Page title="Page privée" meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>
    <Typography>Cette page ne sera pas indexée par les moteurs de recherche.</Typography>
  </Page>
);

WithMultipleMeta

Page avec plusieurs balises meta personnalisées.

export const WithMultipleMeta = () => (
  <Page
    title="Page complète"
    description="Avec plusieurs balises meta"
    meta={[
      { name: 'robots', content: 'noindex, nofollow' },
      { name: 'author', content: 'Alvéole' },
      { httpEquiv: 'X-UA-Compatible', content: 'IE=edge' },
    ]}
  >
    <Typography>Page avec plusieurs balises meta personnalisées.</Typography>
  </Page>
);

WithPageMetaProvider

Configure des meta globales pour toutes les pages via PageMetaProvider dans app/_layout.tsx. Les meta du provider sont injectées en premier ; la prop meta de chaque <Page> les complète ou les écrase.

import { PageMetaProvider } from '@alveole/components';
export default function RootLayout() {
  return (
    <PageMetaProvider meta={[{ name: 'robots', content: 'noindex, nofollow' }]}>
      <Stack />
    </PageMetaProvider>
  );
}
// Une page peut surcharger ou ajouter des meta sans répéter le noindex :
<Page title="Ma page" meta={[{ name: 'author', content: 'Alvéole' }]} />

export const WithPageMetaProvider = () => null;

WithSidebar

Intégration avec un contrôleur de sidebar via useSidebar().

const sidebarController = useSidebar();
return (
  <Page
    sideBarController={sidebarController}
    sidebar={<AdminNavigation sidebarController={sidebarController} />}
    title="Mon titre"
  >
    ...
  </Page>
);

export const WithSidebar = () => null;

Alveole UI Kit — v1.8.4