From 0abb0f38866995c92db321fb17fd9af24d74e928 Mon Sep 17 00:00:00 2001
From: Marko Gronroos <magi@vaadin.com>
Date: Fri, 1 Jul 2016 11:46:56 +0300
Subject: Basic documentation of the declarative format for ordered layouts.

Change-Id: Ie12ff05f8dd22677727127bec33cf2c4ba046c6b
---
 documentation/layout/layout-orderedlayout.asciidoc | 47 +++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

(limited to 'documentation/layout')

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]##&lt;boolean&gt;##++]++
 |[parameter]#margin#|[parameter]##margin##++[=++[replaceable]##&lt;boolean&gt;##++]++
 |[parameter]#expandRatio#|Expand ratio of a child component is specified in the child with: [parameter]#:expand#++[=++[replaceable]##&lt;integer&gt;##++]++ 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
 
-- 
cgit v1.2.3