Layout: Overview | JavaScript UI

Layout Overview

The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview, right, and bottom. By default all of the panels are created, but only the ones you define will be visible. The main panel of the layout is always visible.

Example

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="layout" style="height: 400px"></div>
</body>
<script type="module">
import { w2layout } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let layout = new w2layout({
    name: 'myLayout',
    panels: [
        { type: 'top', size: 60, html: 'top panel' },
        { type: 'main', style: 'background-color: #f5fff1', html: 'main' },
        { type: 'left', size: 150, resizable: true, html: 'left' },
        { type: 'right', size: 150, resizable: true, html: 'rigth' }
    ]
})
layout.render('#layout')
</script>
</html>
​

It is easy to add and remove content to the panels. You can display HTML or other objects. The w2layout object will add a listener to the window resize event and will automatically resize the panels based on the width and height of its box.

xxxxxxxxxx
 
w2ui.myLayout.show('right');
​

Layout Overview

Example

User Comments