#PanelLayout

Source | Original component

A panel: a content container with a set of form switches (padding, scrolling, expansion, border), also the base of layout components such as StackLayout.

#Basic usage

import { PanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 120 }}>
      <PanelLayout padded scrollable framed>
        <p>A padded, framed panel; a scrollbar appears when content overflows.</p>
        <p>Second paragraph.</p>
        <p>Third paragraph.</p>
        <p>Fourth paragraph.</p>
        <p>Fifth paragraph.</p>
      </PanelLayout>
    </div>
  );
}

export default App;

In the expanded form (on by default) the panel fills its parent via absolute positioning, so the parent must be positioned and sized — the outer div above (its position: relative and height) exists for exactly that; with an unpositioned or unsized parent, the panel expands against a further positioned ancestor (or the viewport) and looks like it "vanished". expanded={false} is the static form, shrinking to fit the content. Layouts built on this component, such as StackLayout, inherit the same premise.

#API

#See also

• The hidden three-state semantics of the base class: Layout
• The paged container built on it: StackLayout