@ui5/webcomponents-react/wrappers/components/SplitterLayout/index.d.ts

React Wrapper for UI5 Web Components and additional components

import type { DependencyList, ReactElement } from 'react';
import type { CommonProps } from '../../types/index.js';
import type { SplitterElementPropTypes } from '../SplitterElement/index.js';
interface SplitterLayoutOptions {
    /**
     * Defines whether the `SplitterLayout` should be reset when its size changes depending on the orientation.
     */
    resetOnSizeChange?: boolean;
    /**
     * Defines whether the `SplitterLayout` should be reset when its `children` change.
     */
    resetOnChildrenChange?: boolean;
    /**
     * Defines a list of dependencies that trigger a reset of the `SplitterLayout` when they are changed.
     *
     * __Note:__ The order and size of arrays of dependencies must remain constant in React, it's therefore not possible to change size or order between renders.
     */
    resetOnCustomDepsChange?: DependencyList;
}
export interface SplitterLayoutPropTypes extends CommonProps {
    /**
     * Controls if a vertical or horizontal `SplitterLayout` is rendered.
     */
    vertical?: boolean;
    /**
     * The content areas (optional) to be split. The control will show n-1 splitter bars between n controls in this aggregation.
     */
    children?: ReactElement<SplitterElementPropTypes> | ReactElement<SplitterElementPropTypes>[];
    /**
     * Defines options to customize the behavior of the SplitterLayout.
     */
    options?: SplitterLayoutOptions;
}
/**
 * A layout that contains several content areas. The content that is added to the `SplitterLayout` should be wrapped
 * into 0-n `SplitterElement`s which define the size and size constraints of the content area.
 * The orientation of the `SplitterLayout` can be set to horizontal (default) or vertical. All content areas of the
 * layout will be arranged in that way. In order to split vertically and horizontally at the same time, splitters need
 * to be nested.
 * By adding or changing `SplitterElement`s to the `SplitterLayout` that make up the content areas, the size can be changed
 * programmatically. Additionally, the content areas can be made non-resizable individually and a minimal size (in px)
 * can be set.
 * The splitter bars are focusable to enable resizing of the content areas via keyboard. The size of the content areas
 * can be manipulated when the splitter bar is focused and Left/Down/Right/Up are pressed.
 */
declare const SplitterLayout: import("react").ForwardRefExoticComponent<SplitterLayoutPropTypes & import("react").RefAttributes<HTMLDivElement>>;
export { SplitterLayout };