SplitContainer

The split container is a container with exactly 2 children shown in panels either horizontally or vertically, and allows the user to resize the panels. When the user resizes the panels, the sizes can be stored in Indexed DB and restored on the next page load.

The direction is controlled by the direction property, which can be either "horizontal" or "vertical".

One of the panels have a fixed size, while the other fills the remaining space. By default, the first panel is fixed size, but this can be controlled by setting the fixedPanel property to 1 or 2. The default size of the fixed size panel can be set in pixels in the defaultFixedSize property.

If you want the users size to be persisted, you have to give a name to the SplitContainer with the id property. Like AfGrid, you can reset the fixed size for all users by changing the layoutVersion property.

Usage

import { SplitContainer } from "@olenbetong/synergi-react";

export default function MyComponent() {
  return (
    <SplitContainer fixedPanel={1} defaultFixedSize={400}>
      <Paper className="app-view">This is the first panel</Paper>
      <Paper className="app-view">This is the second panel</Paper>
    </SplitContainer>
  );
}

API

export declare type SplitContainerProps = {
  className?: string;
  panelClassName?: string;
  children: React.ReactNode[];
  direction?: "horizontal" | "vertical";
  fixedPanel?: 1 | 2;
  defaultFixedSize?: number;
  /**
   * When the fixed size is persisted, changing the layoutVersion will force clients
   * to reset to the default value.
   */
  layoutVersion?: string | number;
  /**
   * If you set an id, the fixed size will be persisted, and restored after page load
   */
  id?: string;
};

export declare function SplitContainer({
  className,
  children,
  direction,
  fixedPanel,
  panelClassName,
  defaultFixedSize,
  layoutVersion,
  id,
}: SplitContainerProps): JSX.Element;