diff options
author | Ilia Motornyi <elmot@vaadin.com> | 2015-12-03 14:59:05 +0000 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2015-12-03 14:59:12 +0000 |
commit | 2af72ba9636bec70046394c41744f89ce4572e35 (patch) | |
tree | ccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/layout/layout-absolutelayout.asciidoc | |
parent | 8aa5fabe89f2967e966a64842a608eceaf80d08f (diff) | |
download | vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip |
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00.
Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/layout/layout-absolutelayout.asciidoc')
-rw-r--r-- | documentation/layout/layout-absolutelayout.asciidoc | 144 |
1 files changed, 0 insertions, 144 deletions
diff --git a/documentation/layout/layout-absolutelayout.asciidoc b/documentation/layout/layout-absolutelayout.asciidoc deleted file mode 100644 index 8576cfb09b..0000000000 --- a/documentation/layout/layout-absolutelayout.asciidoc +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: AbsoluteLayout -order: 11 -layout: page ---- - -[[layout.absolutelayout]] -= [classname]#AbsoluteLayout# - -[classname]#AbsoluteLayout# allows placing components in arbitrary positions in -the layout area. The positions are specified in the [methodname]#addComponent()# -method with horizontal and vertical coordinates relative to an edge of the -layout area. The positions can include a third depth dimension, the __z-index__, -which specifies which components are displayed in front and which behind other -components. - -The positions are specified by a CSS absolute position string, using the -[literal]#++left++#, [literal]#++right++#, [literal]#++top++#, -[literal]#++bottom++#, and [literal]#++z-index++# properties known from CSS. In -the following example, we have a 300 by 150 pixels large layout and position a -text field 50 pixels from both the left and the top edge: - - -[source, java] ----- -// A 400x250 pixels size layout -AbsoluteLayout layout = new AbsoluteLayout(); -layout.setWidth("400px"); -layout.setHeight("250px"); - -// A component with coordinates for its top-left corner -TextField text = new TextField("Somewhere someplace"); -layout.addComponent(text, "left: 50px; top: 50px;"); ----- - -The [literal]#++left++# and [literal]#++top++# specify the distance from the -left and top edge, respectively. The [literal]#++right++# and -[literal]#++bottom++# specify the distances from the right and top edge. - - -[source, java] ----- -// At the top-left corner -Button button = new Button( "left: 0px; top: 0px;"); -layout.addComponent(button, "left: 0px; top: 0px;"); - -// At the bottom-right corner -Button buttCorner = new Button( "right: 0px; bottom: 0px;"); -layout.addComponent(buttCorner, "right: 0px; bottom: 0px;"); - -// Relative to the bottom-right corner -Button buttBrRelative = new Button( "right: 50px; bottom: 50px;"); -layout.addComponent(buttBrRelative, "right: 50px; bottom: 50px;"); - -// On the bottom, relative to the left side -Button buttBottom = new Button( "left: 50px; bottom: 0px;"); -layout.addComponent(buttBottom, "left: 50px; bottom: 0px;"); - -// On the right side, up from the bottom -Button buttRight = new Button( "right: 0px; bottom: 100px;"); -layout.addComponent(buttRight, "right: 0px; bottom: 100px;"); ----- - -The result of the above code examples is shown in -<<figure.layout.absolutelayout.bottomright>>. - -[[figure.layout.absolutelayout.bottomright]] -.Components Positioned Relative to Various Edges -image::img/absolutelayout-bottomright.png[] - -Drag and drop is very useful for moving the components contained in an -[classname]#AbsoluteLayout#. Check out the example in -<<dummy/../../../framework/advanced/advanced-dragndrop#advanced.dragndrop.drop-on-component,"Dropping -on a Component">>. - -[[layout.absolutelayout.area]] -== Placing a Component in an Area - -Earlier, we had components of undefined size and specified the positions of -components by a single pair of coordinates. The other possibility is to specify -an area and let the component fill the area by specifying a proportinal size for -the component, such as " [literal]#++100%++#". Normally, you use -[methodname]#setSizeFull()# to take the entire area given by the layout. - - -[source, java] ----- -// Specify an area that a component should fill -Panel panel = new Panel("A Panel filling an area"); -panel.setSizeFull(); // Fill the entire given area -layout.addComponent(panel, "left: 25px; right: 50px; "+ - "top: 100px; bottom: 50px;"); ----- - -The result is shown in <<figure.layout.absolutelayout.area>> - -[[figure.layout.absolutelayout.area]] -.Component Filling an Area Specified by Coordinates -image::img/absolutelayout-area.png[] - - -[[layout.absolutelayout.proportional]] -== Proportional Coordinates - -You can also use proportional coordinates to specify the placement of -components: - - -[source, java] ----- -// A panel that takes 30% to 90% horizontally and -// 20% to 80% vertically -Panel panel = new Panel("A Panel"); -panel.setSizeFull(); // Fill the specified area -layout.addComponent(panel, "left: 30%; right: 10%;" + - "top: 20%; bottom: 20%;"); ----- - -The result is shown in <<figure.layout.absolutelayout.proportional>> - -[[figure.layout.absolutelayout.proportional]] -.Specifying an Area by Proportional Coordinates -image::img/absolutelayout-proportional.png[] - - -[[layout.absolutelayout.css]] -== Styling with CSS - - -[source, css] ----- -.v-absolutelayout {} -.v-absolutelayout-wrapper {} ----- - -The [classname]#AbsoluteLayout# component has [literal]#++v-absolutelayout++# -root style. Each component in the layout is contained within an element that has -the [literal]#++v-absolutelayout-wrapper++#. The component captions are outside -the wrapper elements, in a separate element with the usual -[literal]#++v-caption++# style. - - - - |