LudoJS

ludo.layout.Docking

ludo.layout.

Usage: layout: layout: {type: "tab" }

Docking Layout
This layout extends layout.Tab and displays child views in a tab layout.

The difference between the Docking Layout and the Tabs layout is that in the docking layout, you don't need
to show any child views. When no child views are visible, the view with the docking layout will collapse to
the size of the Tab Bar.

Initially, no child view is displayed unless layout.visible is set on a child view.

For a demo, see Docking layout demo.

Source:
Example
var w = new ludo.Window({
        title:'Docking layout',
        id:'dockingWindow',
        layout:{
            left:50, top:50,
            width:700, height:600,
            type:'linear',
            orientation:'horizontal'
        },
        children:[ // Children for the accordion listed below
            {
                id:'dockingLayoutView',
                layout:{
                    type:'docking',
                    width:200,
                    resizable:true,
                    tabs:'left'
                },
                children:[
                    {
                        id:'view1',
                        title: 'Project',// Title for the accordion
                        html:'<ul><li>Content</li><li>Content</li><li>Content</li><li>Content</li></ul>'
                    },
                    {
                        id:'view2',
                        title: 'Structure', // Title for the accordion
                        html:'Second child view'
                    }
                ]
            },
            {
                html:'<h1>Main View</h1>',
                css:{
                    padding:5,
                    'border-left': '1px solid ' + ludo.$C('border')
                },
                layout:{
                    weight:1
                }
            }
        ]
    });

Extends