diff options
| author | Marko Gronroos <magi@vaadin.com> | 2016-07-01 11:46:56 +0300 |
|---|---|---|
| committer | Marko Gronroos <magi@vaadin.com> | 2016-07-13 19:37:03 +0300 |
| commit | 0abb0f38866995c92db321fb17fd9af24d74e928 (patch) | |
| tree | b8bd366a57c63bed1a3b0fdd17653e07d8c0f46b /documentation/layout | |
| parent | a580558a68404f2b56c92fd6da9752e2bdfb33b1 (diff) | |
| download | vaadin-framework-0abb0f38866995c92db321fb17fd9af24d74e928.tar.gz vaadin-framework-0abb0f38866995c92db321fb17fd9af24d74e928.zip | |
Basic documentation of the declarative format for ordered layouts.
Change-Id: Ie12ff05f8dd22677727127bec33cf2c4ba046c6b
Diffstat (limited to 'documentation/layout')
| -rw-r--r-- | documentation/layout/layout-orderedlayout.asciidoc | 47 |
1 files changed, 42 insertions, 5 deletions
diff --git a/documentation/layout/layout-orderedlayout.asciidoc b/documentation/layout/layout-orderedlayout.asciidoc index 4e0d53bbed..c1bfd030b7 100644 --- a/documentation/layout/layout-orderedlayout.asciidoc +++ b/documentation/layout/layout-orderedlayout.asciidoc @@ -20,7 +20,6 @@ vertically. [classname]#HorizontalLayout# has undefined size in both dimensions. Typical use of the layouts goes as follows: - [source, java] ---- VerticalLayout vertical = new VerticalLayout (); @@ -39,10 +38,20 @@ image::img/orderedlayout_vertical.png[width=30%, scaledwidth=65%] image::img/orderedlayout_horizontal.png[width=80%, scaledwidth=100%] -[[layout.orderedlayout.properties]] -== Properties or Attributes +ifdef::web[] +[[layout.orderedlayout.declarative]] +== Declarative Format -Ordered layouts have the following properties: +Ordered layouts have the following declarative elements: + +|=============== +|Component|Element Name +|[classname]#VerticalLayout#|[elementname]#v-verticallayout# +|[classname]#HorizontalLayout#|[elementname]#v-horizontallayout# +|[classname]#FormLayout#|[elementname]#v-formlayout# +|=============== + +The have the following declarative attributes: [[layout.orderedlayout.properties.table]] .Properties and Declarative Attributes @@ -54,9 +63,37 @@ Ordered layouts have the following properties: |[parameter]#spacing#|[parameter]##spacing##++[=++[replaceable]##<boolean>##++]++ |[parameter]#margin#|[parameter]##margin##++[=++[replaceable]##<boolean>##++]++ |[parameter]#expandRatio#|Expand ratio of a child component is specified in the child with: [parameter]#:expand#++[=++[replaceable]##<integer>##++]++ or [parameter]#:expand# (implies ratio 1) - |=============== +They can also have any attributes applicable to super classes. + +For example: + +[source, html] +---- +<!-- Use margin and spacing --> +<v-vertical-layout size-full margin spacing> + <v-label><b>Hello!</b> - How are you?</v-label> + + <!-- Use expand ratio --> + <v-horizontal-layout size-full :expand> + ... + + <!-- Use expand ratio --> + <v-table _id="mytable" caption="My Table" + size-full :expand/> + </v-horizontal-layout> + + <v-horizontal-layout width-full> + ... + + <!-- Use alignment --> + <v-button :right><b>OK</b></v-button> + </v-horizontal-layout> +</v-vertical-layout> +---- +endif::web[] + [[layout.orderedlayout.spacing]] == Spacing in Ordered Layouts |