Sets or retrieves panel content. Returns object of the content { panel, // string, panel name html, // string/object, current html error, // bool, if there was an error cancelled, // bool, if content was not set removed // function to call when content was unloaded }

Description

The first argument type is the name of the panel. It can be one of the following:

• top
• left
• main
• right
• preview
• bottom
• css

As of 1.3 there is a hidden panel named css. If you define content for this panel, it will be set within style tag. You can also load content for the css panel w2layout.load method. w2ui.layout.html('css', '.class1 { color: red }'); or w2ui.layout.load('css', 'file.css'); Called with just type argument, it will return current content of the panel. let content = w2ui.layout.html('main') console.log(content) The content argument can be either an HTML or an object. If it is an object, then it will assign layout panel's div to the .box property of the object and call .render() method. This allows you to make a grid, sidebar, or any other object with .box property and .render() method as content for the panel. If the argument content is not specified the method will return current content of the panel. // return current content var content = w2ui.layout.html('main'); console.log('main panel content is', content); You can optionally provide transition argument that defines visual transition to the new content. The transition is done using w2utils.transition() method and it can be one of the following:

• slide-left
• slide-right
• slide-up
• slide-down
• flip-left
• flip-right
• flip-up
• flip-down
• pop-in
• pop-out

You can set content during object creation: let layout = new w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'main', content: 'This is main panel' }, { type: 'preview', size: 200 } ] }); Or anytime during run-time: // set new content w2ui.layout.html('main', 'HTML content'); // set content as an object w2ui.layout.html('main', w2ui['grid']); You can set some content and defined a function to be called when this content was replaced w2ui.layout.html('main', 'Some content').removed(() => { console.log('Content was removed') }) You can also also use global .onContent event to be alerted when content is reloaded for the panel.