Linear Layout

API Doc

You are here : > > > >

Linear Layout

layout: { type: 'linear', orientation : 'vertical' }
// or
layout: { type: 'linear'  } // horizontal orientation which is default

Demo

SAMPLE

CODE

<!-- The view will be rendered to the div below -->
<div id="accordion-container" style="width:300px;height:400px;margin:10"></div>
<script type="text/javascript">
var w = new ludo.FramedView({
    title:'Linear layout',
    renderTo: $("#accordion-container"),
    layout:{
        width:350, height:'100%',
        type:'linear',
        orientation:'horizontal'
    },
    children:[
        {
            html : 'Child View 1',
            layout:{
                width:200
            },
            css:{
                'background-color' : '#E64A19',
                color: '#fff',
                padding:4
            }
        },
        {
            html : 'Child View 2', 
            layout:{
                weight:1
            },
             css:{
                 'background-color' : '#689F38',
                 color: '#fff',
                 padding:4
             }
        },
        {
            html : 'Child View 3',
            layout:{
                width:50
            },
             css:{
                 'background-color' : '#5D4037',
                 color: '#fff',
                 padding:4
             }
        }
    ]
});
</script>

Linear Layout

The Linear Layout renders child views next to each other in vertically or horizontally direction.

Orientation, vertical or horizontal is set using the layout.orientation attribute:

layout:{
    "type":"linear", "orientation" : "vertical", 
    children:[{...}, {...}]
}

layout:{
    "type":"linear", "orientation" : "horizontal",
    children:[{...}, {...}]
}

Default orientation when not specified is "horizontal"

Size of Child Views

Size of child views is set using the layout.width attribute when orientation is horizontal and layout.height when orientation is set to vertical.

Dynamic size can be set using the layout.weight keyword. The available height or width after all views with fixed size are rendered are distributed among the child views with the weight attribute.

In the example below

SAMPLE

CODE

<!-- The view will be rendered to the div below -->
<div id="linear-container2" style="width:300px;height:450px;margin:10"></div>
<script type="text/javascript">
var v = new ludo.FramedView({
    renderTo:'#linear-container2',
    title: 'Linear Layout',
    layout: { type:"linear", "orientation": "vertical", height: '400' },
    children:[
        { html: 'First View, height = 100 ', layout: { height: 100 },css:{ 'background-color': '#689F38' }},
        { html: 'Second View, weight = 1', layout: { weight: 1 },css:{ 'background-color': '#00796B' }},
        { html: 'Third View, weight = 2', layout: { weight: 2 },css:{ 'background-color': '#0097A7' }}
    ]
});
</script>

the parent view has a height of 400. The first view has a fixed height of 100 pixels. That leaves 300 pixels for the two remaining child views. The total weight of the remaining views is 3.

The weight of the second view is 1, so it will be 100 pixels tall(1 / 3 * 300).

The second View has a height of three which gives a height of 200 (2 / 3 * 300).

Back to Grid Layout

Next: Navigation Bar Layout

Generated 2016-12-02 19:27:13