@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
48 lines (47 loc) • 2.53 kB
TypeScript
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 };