feat: updates the screen component table details. (#876)

* updates the screen component table details. Signed-off-by: carlossteinzup <carlos.stein@zup.com.br> * Update content/en/api/components/layout/screen/overview.md Signed-off-by: carlossteinzup <carlos.stein@zup.com.br>
ZupIT · Mar 15, 2022 · 520d285 · 520d285
1 parent f0fbcde
commit 520d285
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/content/en/api/components/layout/screen/overview.md b/content/en/api/components/layout/screen/overview.md
@@ -9,16 +9,18 @@ description: Here you'll find all about screen's components and its attributes d
 
 ## What is it?
 
-Your screen has attributes and components that can be used and configured. On the table below, we listed the main characteristics from each of these attributes.
+The Screen component is a Beagle element that helps the user to define a screen view structure. In this component we define settings such as using *`safe areas`* or displaying a toolbar/navigation bar.
 
-| **Attribute**          | **Type**                                                  | Required | **Definition**                                                                                        |
-| :--------------------- | :-------------------------------------------------------- | :------- | :---------------------------------------------------------------------------------------------------- |
-| identifier             | String                                                    |          | Attribute that globally identifies a screen in your application so you can attributes actions for it. |
-| safe area              | [**Safe Area**]({{< ref path="/api/components/layout/screen/safe-area" lang="en" >}})               |          | Specifies a screen's component position.                                                              |
-| navigation bar         | [**Navigation Bar**]({{< ref path="/api/components/layout/screen/navigation-bar" lang="en" >}})     |          | Allows action/navigation's bar on the screen.                                                         |
-| child                  | [**Server-Driven Component**]({{< ref path="/api/components/" lang="en" >}})      | ✓        | Define screen's elements. It can be any visual component that extends to`ServerDrivenComponent`.      |
-| style                  | [**Style**]({{< ref path="/api/components/widget#style-attributes" lang="en" >}})            |          | Provide visual customization options to the `screen.`                                                 |
-| context                | [**ContextData**]({{< ref path="/api/context/" lang="en" >}})                     |          | Screen's context.                                                                                     |
+All these functionalities are defined from attributes, which we list in the table below, defining the main characteristics of a Screen component.
+
+| **Attribute** | **Type** | Required | **Definition** |
+| :------------ | :------- | :------: | :------------- |
+| id            | String   |          | Attribute that identifies a screen in your application |
+| safeArea      | [**Safe Area**]({{< ref path="/api/components/layout/screen/safe-area" lang="en" >}}) |  | Enable Safe areas to help place views within the visible portion of the overall interface. By default it is not enabled and it won't constrain considering any safe area. |
+| navigationBar | [**Navigation Bar**]({{< ref path="/api/components/layout/screen/navigation-bar" lang="en" >}}) |  | Enables some Navigation Bar details to be set, like Backbutton and Navigation Bar Itens |
+| child         | [**Server-Driven Component**]({{< ref path="/api/components/" lang="en" >}}) | ✓ | Receives a list of Beagle componentes. |
+| style         | [**Style**]({{< ref path="/api/components/widget#style-attributes" lang="en" >}}) |  | Provide visual customization options to the `screen` |
+| context       | [**ContextData**]({{< ref path="/api/context/" lang="en" >}}) |  | Creates a *Context Data* for a Screen. |
 
 ## How to use it?
 

diff --git a/content/pt/api/components/layout/screen/overview.md b/content/pt/api/components/layout/screen/overview.md
@@ -7,20 +7,22 @@ description: Descrição dos componentes de Screen e seus atributos.
 
 ---
 
-## O que é?
+## O que é isso?
 
-A sua tela possui atributos e componentes que podem ser usados e configurados. Na tabela abaixo, listamos as principais características para cada um destes atributos.
+O componete Screen é um elemento do Beagle que permite ao usuário definir a estrutura de visualização de uma tela. Nesse componente definimos configurações como o uso de *`safe areas`* ou a exibição de uma barra de ferramentas/barra de navegação.
 
-| **Atributo**           | **Tipo**                                                     | Obrigatório | **Definição**                                                                                                |
-| :--------------------- | :----------------------------------------------------------- | :---------: | :----------------------------------------------------------------------------------------------------------- |
-| identifier             | String                                                       |             | Atributo que identifica a tela globalmente na sua aplicação, de modo que seja possível atribuir ações a ela. |
-| safe area              | [**Safe Area**]({{< ref path="/api/components/layout/screen/safe-area" lang="pt" >}})               |             | Especifica o posicionamento dos componentes na tela.                                                         |
-| navigation bar         | [**Navigation Bar**]({{< ref path="/api/components/layout/screen/navigation-bar" lang="pt" >}})     |             | Permite configurar a barra de ações/navegação na tela.                                                       |
-| child                  | [**Server Driven Component**]({{< ref path="/api/components/" lang="pt" >}})      |      ✓      | Define os elementos na tela. Pode ser qualquer componente visual que estenda de `ServerDrivenComponent`.     |
-| style                  | [**Style**]({{< ref path="/api/components/widget#atributos-do-style" lang="pt" >}})          |             | Fornece opções de customização visual para a `Screen.`                                                       |
-| context                | [**ContextData**]({{< ref path="/api/context/" lang="pt" >}})                     |             | Contexto da tela.                                                                                            |
+Todas essas funcionalidades são definidas a partir de atributos, que listamos na tabela abaixo, definindo as principais características de uma tela (Screen component).
 
-## Como usar?
+| **Atributo**  | **Tipo** | Obrigatório | **Definição** |
+| :------------ | :------- | :---------: | :------------ |
+| id            | String | | Atributo que identifica uma tela em uma aplicação |
+| safeArea      | [**Safe Area**]({{< ref path="/api/components/layout/screen/safe-area" lang="en" >}}) | | Ative Áreas seguras para ajudar a colocar visualizações na parte visível da interface geral. Por padrão, não está habilitado e não restringirá a consideração de nenhuma área segura. |
+| navigationBar | [**Navigation Bar**]({{< ref path="/api/components/layout/screen/navigation-bar" lang="en" >}}) | | Permite que alguns detalhes da Barra de Navegação sejam definidos, como Botão Voltar e Itens da Barra de Navegação |
+| child         | [**Server-Driven Component**]({{< ref path="/api/components/" lang="en" >}}) | ✓ | Recebe uma lista de componentes do Beagle. |
+| style         | [**Style**]({{< ref path="/api/components/widget#style-attributes" lang="en" >}}) | | Fornecer opções de personalização visual para a `tela` |
+| context       | [**ContextData**]({{< ref path="/api/context/" lang="en" >}}) | | Cria um *Dados de Contexto* para uma Tela. |
+
+## Como usá-la?
 
 {{< tabs id="T174" >}}
 {{% tab name="JSON" %}}