Customization

You can customize the behavior of the PanelBar depending on the specific requirements of your React project.

The PanelBar enables you to render:

Collections

You can map a collection to the PanelBarItem components by using the mapItemsToComponents utility function.

  • If you present a children property, the PanelBar will render a recursive map until it reaches an object that contains neither a content, nor a children property.
  • If you present a content property, the property will be prioritized and directly rendered inside the PanelBarItem component.
<style>
    .custom-template {
        padding: 30px;
        text-align: center;
    }
</style>
class App extends React.Component {
    render() {
        const items = [
            { title: "First item", content: (<div class="custom-template">First item content</div>)},
            {
                title: "Second item", children: [
                    {
                        title: "Child item"
                    }
                ]
            }
        ]
        const components = PanelBarUtils.mapItemsToComponents(items);

        return(
            <PanelBar children={components}/>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Declaratively Initialized Items

The following example demonstrates how to instantiate PanelBar items by using the declarative approach.

class App extends React.Component {
    render() {
        const customStyle = {
            padding: '30px',
            textAlign: 'center'
        }
        return(
            <PanelBar>
                <PanelBarItem expanded={true}>
                    <div style={customStyle} class="custom-template">Item content</div>
                </PanelBarItem>
            </PanelBar>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Custom Properties

The PanelBarItem allows you to pass custom properties to better identify item interaction.

class App extends React.Component {
    handleSelect = (e) => {
        console.log(e.target.props.myCustomProp);
    }
    render() {
        return(
            <PanelBar onSelect={this.handleSelect}>
                <PanelBarItem title="Item 1" myCustomProp="first item custom prop"/>
                <PanelBarItem title="Item 2" myCustomProp="second item custom prop"/>
            </PanelBar>
        )
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /