diff options
Diffstat (limited to 'documentation/layout/layout-orderedlayout.asciidoc')
| -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 |