Item Configuration

var layout = new StrelitLayout({
    content: [{
        //Non ReactJS
        type: 'component',
        componentName: 'someName',
        componentState: { some: 'value' },

        //ReactJS
        type: 'react-component',
        component: 'name of your component',
        props: {},

        //General
        content: [],
        id: 'some id',
        width: 30,
        height: 30,
        isClosable: true,
        title: 'some title',
        activeItemIndex: 1
    }]
});

General

argument	type	optional	default	description
type	String	false	-	The type of the item. Possible values are 'row', 'column', 'stack', 'component' and 'react-component'
content	Array	true	-	An array of configurations for items that will be created as children of this item
width	Number	true	-	The width of this item, relative to the other children of its parent in percent
height	Number	true	-	The height of this item, relative to the other children of its parent in percent
id	Mixed	true	-	A String or an Array of Strings. Used to retrieve the item using item.getItemsById()
isClosable	Boolean	true	true	Determines if the item is closable. If false, the x on the items tab will be hidden and container.close() will return false
title	String	true	componentName or ''	The title of the item as displayed on its tab and on popout windows

Components without ReactJS

argument	type	optional	default	description
componentName	String	false	-	The name of the component as specified in layout.registerComponent. Mandatory if type is 'component'
componentState	Object	true	-	A serialisable object. Will be passed to the component constructor function and will be the value returned by container.getState().

Components with ReactJS

argument	type	optional	default	description
component	String	false	-	The name of the component as specified in layout.registerComponent. Mandatory if type is 'react-component'
props	Object	true	-	Properties that will be passed to the component and accessible using `this.props`

Stack Specific

argument	type	optional	default	description
activeItemIndex	Number	true	0	The index of the initially selected tab

Community & Support

Need help or have architectural questions?

Whether you are building complex multi-screen trading terminals, enterprise data workspaces, or migrating from legacy layout engines, the Strelit UI Kit engineering team and community are here to help.

Open an Issue on GitHub →