|
|
@@ -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 |
|
|
|
|