docs: add new Layout Functions: Center, Column and Row.. (#516)

* add documentation new functions * docs: update text * adjust documentation components * Update content/en/api/components/layout/accessibility.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/accessibility.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/center.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/center.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/column.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/column.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/column.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/column.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/container.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/expanded.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/expanded.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/margin.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/margin.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/margin.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/overview.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/padding.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/padding.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/padding.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/row.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/row.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/row.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/sizedbox.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/sizedbox.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/styled.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * Update content/en/api/components/layout/styled.md Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com> * change portuguese * adjust mistake Co-authored-by: Uzias Ferreira <uziasferreira@gmail.com> Co-authored-by: Tiago Peres França <tiagoperesfr@gmail.com>
ZupIT · Apr 28, 2021 · f76676f · f76676f
1 parent b44f17c
commit f76676f
Show file tree

Hide file tree

Showing 28 changed files with 2,613 additions and 1,576 deletions.
diff --git a/content/en/api/accessibility.md b/content/en/api/accessibility.md
@@ -9,12 +9,12 @@ description: Here you'll find a description of accessibility attributes
 ## What is it?
 
 This component enables accessibility elements, such as a text message that can be read by a screen reader.
- 
+
 
 | **Attributes** | **Type** | Required | **Definition** |
 | :--- | :--- | :--- | :--- |
 | accessible | Boolean |   ✓ | Indicates whether the component will be interpreted as accessible. Default is `true`. |
-| accessibilityLabel | String |  | `string` containing a message that will be spoken by programs, like VoiceOver. |
+| accessibilityLabel | String |  | Contains a message that will be spoken by programs like `VoiceOver`. |
 | isHeader | Boolean |  | Indicates whether the component is a header. Default is `false`. |
 
 {{% alert color="warning" %}}

diff --git a/content/en/api/components/layout/_index.md b/content/en/api/components/layout/_index.md
@@ -6,6 +6,6 @@ description: Layout components description and its attributes details
 
 ---
 
-Layout component can be defined with a group of 7 subcomponents: Container, Horizontal, Page View, List View, Scroll View, Stack and Vertical.   
+The layout components can be defined by a group of 4 subcomponents: Container, Page View, List View and Scroll View.   
 
  You will find the description of every Layout attribute:
diff --git a/content/en/api/components/layout/accessibility.md b/content/en/api/components/layout/accessibility.md
@@ -0,0 +1,55 @@
+---
+title: Accessibility
+weight: 338
+description: You will find here the description of the Accessibility function and its attributes details
+---
+
+---
+
+
+## What is it?
+
+`Accessibility` is a function that applies accessibility to your component.
+
+See how the structure is represented:
+
+| **Attribute** | **Type**  | Required | **Definition** |
+| :----------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------- |
+| self   | StyleComponent                                                |      ✓       | Component the receive the accessibility properties. |
+| accessible | Boolean | ✓ | Indicates whether the component will be interpreted as accessible. Default is `true`. |
+| accessibilityLabel | String |   | Contains a message that will be spoken by programs like `VoiceOver.` |
+| isHeader | Boolean |  | Indicates whether the component is a header. Default is `false`. |
+
+
+
+## How to use it?
+
+{{< tabs id="T145" >}}
+{{% tab name="JSON" %}}
+
+<!-- json-playground:accessibility.json
+{
+  "_beagleComponent_" : "beagle:text",
+  "text" : "simple text",
+  "accessibility" : {
+    "accessible" : true,
+    "accessibilityLabel" : "text",
+    "isHeader" : false
+  }
+}
+-->
+
+{{% playground file="accessibility.json" language="pt" %}}
+{{% /tab %}}
+
+{{% tab name="Kotlin DSL" %}}
+
+```kotlin
+Accessibility(
+  self = Text("simple text"),
+  accessibilityLabel = "text"
+    )
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/content/en/api/components/layout/center.md b/content/en/api/components/layout/center.md
@@ -0,0 +1,53 @@
+---
+title: Center
+weight: 338
+description: You will find here the description of the Center function and its attributes details
+---
+
+---
+
+
+## What is it?
+
+`Center` is a function to help you organize the layout of your view. It centers the component passed as parameter by setting `justifyContent`, `alignItems`, `alignSelf` and `alignContent` to `CENTER`.
+
+See how the structure is represented:
+
+| **Attribute** | **Type**  | Required | **Definition** |
+| :----------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------- |
+| self   | StyleComponent                                                |      ✓       | Component to receive the style. |
+
+
+## How to use it?
+
+{{< tabs id="T145" >}}
+{{% tab name="JSON" %}}
+
+<!-- json-playground:center.json
+{
+  "_beagleComponent_" : "beagle:text",
+  "text" : "simple text",
+  "style" : {
+    "flex" : {
+      "justifyContent" : "CENTER",
+      "alignItems" : "CENTER",
+      "alignSelf" : "CENTER",
+      "alignContent" : "CENTER"
+    }
+  }
+}
+-->
+
+{{% playground file="center.json" language="pt" %}}
+{{% /tab %}}
+
+{{% tab name="Kotlin DSL" %}}
+
+```kotlin
+Center(
+    self = Text(text = "simple text")
+)
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/content/en/api/components/layout/column.md b/content/en/api/components/layout/column.md
@@ -0,0 +1,59 @@
+---
+title: Column
+weight: 338
+description: You will find here the description of the Column function and its attributes details
+---
+
+---
+
+
+## What is it?
+
+`Column` is a function to help you organize the layout of your view. It  creates a `Container` that displays its content in a vertical line. This is equivalent to create a `Container` with `flexDirection` equal to `COLUMN`.
+
+See how the structure is represented:
+
+| **Attribute** | **Type**  | Required | **Definition** |
+| :----------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------- |
+| children     | List &lt;[ServerDriven Component]({{< ref path="/api/components" lang="pt" >}})&gt; |            | The content of this Container, i.e. its children.
+| context      | [ContextData]({{< ref path="/api/context/" lang="pt" >}})                           |             | The [**context**]({{< ref path="/api/context" lang="en" >}}) linked to this widget.                                                    |
+| onInit       | List&lt;[**Action**]({{< ref path="/api/actions" lang="en" >}})&gt; |  | It is a parameter that allows you to define a list of actions to be performed when the Widget is displayed. |
+| styleId   | String                                                |             | Refers to a locally configured style that it will be applied on the container. |
+| reverse   | Boolean                                                |             | Displays its elements from bottom to top. Default is `false`. |
+
+
+## How to use it?
+
+{{< tabs id="T145" >}}
+{{% tab name="JSON" %}}
+
+<!-- json-playground:column.json
+{
+  "_beagleComponent_" : "beagle:container",
+  "children" : [ {
+    "_beagleComponent_" : "beagle:text",
+    "text" : "simple text"
+  } ],
+  "style" : {
+    "flex" : {
+      "flexDirection" : "COLUMN"
+    }
+  }
+}
+-->
+
+{{% playground file="column.json" language="pt" %}}
+{{% /tab %}}
+
+{{% tab name="Kotlin DSL" %}}
+
+```kotlin
+Column(
+    children = listOf(
+        Text(text = "simple text")
+    )
+)
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/content/en/api/components/layout/container.md b/content/en/api/components/layout/container.md
@@ -6,21 +6,21 @@ description: You will find here the description of Container components and its
 
 ---
 
-## What is it? 
+## What is it?
 
-`Container` is a component that contains other components inside it. 
+`Container` is a component that contains other components inside it.
 
 See how the structure is represented:
 
 | **Attribute** | **Type**  | Required | **Definition** |
 | :--- | :--- | :--- | :--- |
-| children | List &lt;[**ServerDriven Component**]({{< ref path="/api/widget" lang="en" >}})&gt; |    ✓ | Defines the component list that is part of the container.  |
+| children | List &lt;[**ServerDriven Component**]({{< ref path="/api/widget" lang="en" >}})&gt; |     | The content of this Container, i.e. its children.  |
 | context | [**ContextData**]({{< ref path="/api/context" lang="en" >}}) |  | It is the [**context**]({{< ref path="/api/context" lang="en" >}}) in this widget.  |
 | onInit | List&lt;[**Action**]({{< ref path="/api/actions" lang="en" >}})&gt; |  | It is a parameter that allows you to define a list of actions to be performed when the Widget is displayed. |
 | styleId   | String                                              |          | Refers to a locally configured style that it will be applied on the container. |
 
 
-## How to use it? 
+## How to use it?
 
 {{< tabs id="T127" >}}
 {{% tab name="JSON" %}}
@@ -35,7 +35,7 @@ See how the structure is represented:
     ],
     "context": {
         "id": "myContext",
-        "value": "Hello world!" 
+        "value": "Hello world!"
     }
 }
 -->

diff --git a/content/en/api/components/layout/expanded.md b/content/en/api/components/layout/expanded.md
@@ -0,0 +1,61 @@
+---
+title: Expanded
+weight: 338
+description: You will find here the description of the Expanded function and its attributes details
+---
+
+---
+
+
+## What is it?
+
+`Expanded` is a function to help you organize the layout of your view. It makes the component passed as parameter expand its size to all the available space. This is achieved by setting `width` to 100%, `height` to 100%, `alignSelf` to `STRETCH` and `grow` to 1.0.
+
+See how the structure is represented:
+
+| **Attribute** | **Type**  | Required | **Definition** |
+| :----------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------- |
+| self   | StyleComponent                                                |      ✓       | Component to receive the style. |
+
+
+## How to use it?
+
+{{< tabs id="T145" >}}
+{{% tab name="JSON" %}}
+
+<!-- json-playground:expanded.json
+{
+  "_beagleComponent_" : "beagle:text",
+  "text" : "simple text",
+  "style" : {
+    "size" : {
+      "width" : {
+        "value" : 100.0,
+        "type" : "PERCENT"
+      },
+      "height" : {
+        "value" : 100.0,
+        "type" : "PERCENT"
+      }
+    },
+    "flex" : {
+      "alignSelf" : "STRETCH",
+      "grow" : 1.0
+    }
+  }
+}
+-->
+
+{{% playground file="expanded.json" language="pt" %}}
+{{% /tab %}}
+
+{{% tab name="Kotlin DSL" %}}
+
+```kotlin
+Expanded(
+    self = Text(text = "simple text")
+)
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/content/en/api/components/layout/margin.md b/content/en/api/components/layout/margin.md
@@ -0,0 +1,55 @@
+---
+title: Margin
+weight: 338
+description: You will find here the description of the Margin function and its attributes details
+---
+
+---
+
+
+## What is it?
+
+`Margin` is a function to help you organize the layout of your view. It creates a space between the component passed as parameter and the outside content by setting its margins to the given value.
+
+See how the structure is represented:
+
+| **Attribute** | **Type**  | Required | **Definition** |
+| :----------- | :------------------------------------------------------------- | :---------: | :---------------------------------------------------------------------------------------------------------------- |
+| self   | StyleComponent                                                |      ✓       | Component to receive the style. |
+| margin   | EdgeValue                                                |      ✓       | Margin to be applied to the component. |
+
+
+## How to use it?
+
+{{< tabs id="T145" >}}
+{{% tab name="JSON" %}}
+
+<!-- json-playground:margin.json
+{
+  "_beagleComponent_" : "beagle:text",
+  "text" : "simple text",
+  "style" : {
+    "margin" : {
+      "all" : {
+        "value" : 40.0,
+        "type" : "REAL"
+      }
+    }
+  }
+}
+-->
+
+{{% playground file="margin.json" language="pt" %}}
+{{% /tab %}}
+
+{{% tab name="Kotlin DSL" %}}
+
+```kotlin
+Margin(
+  margin = EdgeValue.all(40),
+  self = Text("simple text")
+    )
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/content/en/api/components/layout/overview.md b/content/en/api/components/layout/overview.md
@@ -7,6 +7,6 @@ description: Layout components description and its attributes details
 
 ---
 
-Layout component can be defined with a group of 7 subcomponents: Container, Horizontal, Page View, List View, Scroll View, Stack and Vertical.   
+The layout components can be defined by a group of 4 subcomponents: Container, Page View, List View and Scroll View.   
 
- You will find the description of every Layout attribute:
+ You will find the description of every Layout attribute: