Change-Id: I736bfeb7e3d8bf10e08a6058768ea73ff83553bbtags/7.7.0.alpha1
[[layout.absolutelayout]] | [[layout.absolutelayout]] | ||||
= [classname]#AbsoluteLayout# | = [classname]#AbsoluteLayout# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/absolute-layout"] | |||||
endif::web[] | |||||
[classname]#AbsoluteLayout# allows placing components in arbitrary positions in | [classname]#AbsoluteLayout# allows placing components in arbitrary positions in | ||||
the layout area. The positions are specified in the [methodname]#addComponent()# | the layout area. The positions are specified in the [methodname]#addComponent()# | ||||
method with horizontal and vertical coordinates relative to an edge of the | method with horizontal and vertical coordinates relative to an edge of the |
[[layout.accordion]] | [[layout.accordion]] | ||||
= [classname]#Accordion# | = [classname]#Accordion# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/accordion"] | |||||
endif::web[] | |||||
[classname]#Accordion# is a multicomponent container similar to | [classname]#Accordion# is a multicomponent container similar to | ||||
[classname]#TabSheet#, except that the "tabs" are arranged vertically. Clicking | [classname]#TabSheet#, except that the "tabs" are arranged vertically. Clicking | ||||
on a tab opens its contained component in the space between the tab and the next | on a tab opens its contained component in the space between the tab and the next |
[[layout.csslayout]] | [[layout.csslayout]] | ||||
= [classname]#CssLayout# | = [classname]#CssLayout# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/css-layout"] | |||||
endif::web[] | |||||
[classname]#CssLayout# allows strong control over styling of the components | [classname]#CssLayout# allows strong control over styling of the components | ||||
contained inside the layout. The components are contained in a simple DOM | contained inside the layout. The components are contained in a simple DOM | ||||
structure consisting of [literal]#++<div>++# elements. By default, the contained | structure consisting of [literal]#++<div>++# elements. By default, the contained |
[[layout.customlayout]] | [[layout.customlayout]] | ||||
= Custom Layouts | = Custom Layouts | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/custom-layout"] | |||||
endif::web[] | |||||
While it is possible to create almost any typical layout with the standard | While it is possible to create almost any typical layout with the standard | ||||
layout components, it is sometimes best to separate the layout completely from | layout components, it is sometimes best to separate the layout completely from | ||||
code. With the [classname]#CustomLayout# component, you can write your layout as | code. With the [classname]#CustomLayout# component, you can write your layout as |
[[layout.formlayout]] | [[layout.formlayout]] | ||||
= [classname]#FormLayout# | = [classname]#FormLayout# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/form-layout"] | |||||
endif::web[] | |||||
[classname]#FormLayout# lays the components and their captions out in two | [classname]#FormLayout# lays the components and their captions out in two | ||||
columns, with optional indicators for required fields and errors that can be | columns, with optional indicators for required fields and errors that can be | ||||
shown for each field. The field captions can have an icon in addition to the | shown for each field. The field captions can have an icon in addition to the |
[[layout.gridlayout]] | [[layout.gridlayout]] | ||||
= [classname]#GridLayout# | = [classname]#GridLayout# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/grid-layout"] | |||||
endif::web[] | |||||
[classname]#GridLayout# container lays components out on a grid, defined by the | [classname]#GridLayout# container lays components out on a grid, defined by the | ||||
number of columns and rows. The columns and rows of the grid serve as | number of columns and rows. The columns and rows of the grid serve as | ||||
coordinates that are used for laying out components on the grid. Each component | coordinates that are used for laying out components on the grid. Each component |
[[layout.panel]] | [[layout.panel]] | ||||
= [classname]#Panel# | = [classname]#Panel# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/panel"] | |||||
endif::web[] | |||||
[classname]#Panel# is a single-component container with a frame around the | [classname]#Panel# is a single-component container with a frame around the | ||||
content. It has an optional caption and an icon which are handled by the panel | content. It has an optional caption and an icon which are handled by the panel | ||||
itself, not its containing layout. The panel itself does not manage the caption | itself, not its containing layout. The panel itself does not manage the caption |
[[layout.splitpanel]] | [[layout.splitpanel]] | ||||
= [classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# | = [classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# | ||||
((("[classname]#HorizontalSplitPanel#", id="term.layout.splitpanel.horizontal", range="startofrange"))) | |||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/"] | |||||
endif::web[] | |||||
((("[classname]#HorizontalSplitPanel#", id="term.layout.splitpanel.horizontal", range="startofrange"))) | |||||
((("[classname]#VerticalSplitPanel#", id="term.layout.splitpanel.vertical", range="startofrange"))) | ((("[classname]#VerticalSplitPanel#", id="term.layout.splitpanel.vertical", range="startofrange"))) | ||||
[classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# are a | [classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# are a | ||||
two-component containers that divide the available space into two areas to | two-component containers that divide the available space into two areas to | ||||
accomodate the two components. [classname]#HorizontalSplitPanel# makes the split | accomodate the two components. [classname]#HorizontalSplitPanel# makes the split |
[[layout.sub-window]] | [[layout.sub-window]] | ||||
= Sub-Windows | = Sub-Windows | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/window"] | |||||
endif::web[] | |||||
__Sub-windows__ are floating panels within a native browser window. Unlike | __Sub-windows__ are floating panels within a native browser window. Unlike | ||||
native browser windows, sub-windows are managed by the client-side runtime of | native browser windows, sub-windows are managed by the client-side runtime of | ||||
Vaadin using HTML features. Vaadin allows opening, closing, resizing, maximizing | Vaadin using HTML features. Vaadin allows opening, closing, resizing, maximizing |
[[layout.tabsheet]] | [[layout.tabsheet]] | ||||
= [classname]#TabSheet# | = [classname]#TabSheet# | ||||
ifdef::web[] | |||||
[.sampler] | |||||
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/tab-sheet"] | |||||
endif::web[] | |||||
The [classname]#TabSheet# is a multicomponent container that allows switching | The [classname]#TabSheet# is a multicomponent container that allows switching | ||||
between the components with "tabs". The tabs are organized as a tab bar at the | between the components with "tabs". The tabs are organized as a tab bar at the | ||||
top of the tab sheet. Clicking on a tab opens its contained component in the | top of the tab sheet. Clicking on a tab opens its contained component in the |