CxJS

ContentPlaceholder

import { ContentPlaceholder } from "cx/ui";

ContentPlaceholder marks insertion points inside outer layouts. Content from child components flows into these placeholders.

Usage

const AppLayout = (
  <div>
    <header>
      <ContentPlaceholder name="header" />
    </header>
    <main>
      <ContentPlaceholder />
    </main>
  </div>
);

The default placeholder (without a name) receives the main content. Named placeholders receive content targeted with Content or the putInto attribute.

Configuration

PropertyTypeDefaultDescription
namestring"body"Placeholder identifier. Omit for main content area.