---
title: Ajustando Tela e Componentes
slug: low-code/ajustando-tela-e-componentes
docTags: 
createdAt: 2024-03-08T12:45:27.140Z
---

:::hint{type="info"}
## UUID

- Identificador único que cada elemento/componente possui.
:::

:::hint{type="info"}
## Eventos

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/jLhx0S_vzH9wkSAOHZOON_.blob" size="50" width="348" height="165" position="center" showCaption="false"}

É possível adicionar um evento a um elemento.

- **Mount**: Eventos de mount são realizados quando o elemento renderiza na tela;
- **Click**: Evento de click é relacionado à interação do usuário com o elemento. Só tem no botão e no flex.
:::

## Tela

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/CQwSovaUryzsoxi4d2f0H_.blob" size="56" width="353" height="251" position="center" showCaption="false"}

Propriedades da tela:

- **loading**: Mostra o indicador de carregando antes da tela renderizar
- **Initial**: Marca a tela como a inicial do app
- **Pathname**: Nome que referencia a tela, usado para rotas
- **space**: 

## Botão

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/I6WA5G6OADspk42UTR_Hy_.blob" size="18" width="74" height="85" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/suy9fcJh5eHft-MMqYIGt_.blob" size="56" width="349" height="434" position="center" showCaption="false"}

Propriedades do botão:
Disabled: Desabilita o botão;
Hidden: Esconde o botão;
Loading: Mostra um indicador de "carregando";
Rounded: Arredonda o botão;
Color: Mudar a cor do botão;
Text: Texto que aparece dentro do botão;
Variant: Seleciona Estilos variados do botão.

## Câmera

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/VT9H5hUDEM9LqUxOXMnWh_.blob" size="16" width="71" height="91" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/vOJppBDfdhdfus34jkIir_.blob" size="66" width="314" height="102" position="center" showCaption="false"}

Propriedades da câmera:
Hidden: Esconde a câmera.

## Carrosel

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/Q-S_Pc7QcOy5zAsagcyHm_.blob" size="20" width="74" height="95" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/g9DSKs6lwJs5dPIPenZnp_.blob" size="56" width="315" height="221" position="center" showCaption="false"}

Propriedades do Carrossel:
Hidden: Esconde o Carrossel;
Show Pagination: Mostra a paginação do Carrossel;
Slides per view: Colocar quantidade de slides por exibição;
Space Between: Espaço entre os slides;

## Flex

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/HcFx_OjaMtlIAH1LgAB-C_.blob" size="20" width="68" height="90" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/k8o2GRDd9Aef-KKiGMqrQ_.blob" size="56" width="348" height="216" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/PIT_EG7TZ4PlmPK4Ebw-H_.blob" size="60" width="313" height="113" position="center" showCaption="false"}

Propriedades do Flex:
Hidden: Esconde o flex;
Disabled: Desabilita o flex;
Direction: Verifica se o flex será na vertical ou na horizontal;
Space: Utilizada para dar um espaçamento entre os itens, funciona da mesma forma que o Gap.
Vale destacar que o layout do Space será determinado pelo Direction, que pode ser horizontal ou vertical.

## Formulário

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/lS10VDauamA4kJ1MwQ5V3_.blob" size="18" width="72" height="88" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/ge77MA7wkXKw6VDNFEmeI_.blob" size="56" width="346" height="149" position="center" showCaption="false"}

Propriedades do Form:
Hidden: Esconde o Formulário;
Space: Utilizada para dar um espaçamento entre os itens, funciona da mesma forma que o Gap.
Vale destacar que o layout do Space será determinado pelo Direction, que pode ser horizontal ou vertical.

## Get

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/bOSo9bMT9Xl7beUoEOJ_Q_.blob" size="18" width="71" height="89" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/MbmwYhiOWQFh26hcwwlUD_.blob" size="60" width="350" height="150" position="center" showCaption="false"}

Propriedades do Get:
Hidden: Esconde o Get;
URL: URL de onde será feita a requisição.

## Ícone

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/htF97rYseXoFy87pn6xqn_.blob" size="16" width="69" height="91" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/two5Iw3sRgU--SJbpcpCW_.blob" size="50" width="350" height="430" position="center" showCaption="false"}

Propriedades da Imagem:
Hidden: Esconde a imagem;
Source:  De onde virá a imagem.

## Input

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/fXNIhevwH8v2zMPcaG-yw_.blob" size="16" width="74" height="89" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/3BIKqfX-fBteX3azRXUP1_.blob" size="46" width="346" height="433" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/jSZlO2LFRbUAufnoX9l0P_.blob" size="44" width="342" height="318" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/rhx6b1aZCoTn8lrhGnV2N_.blob" size="50" width="320" height="289" position="center" showCaption="false"}

Propriedades do Input:
Type: Seleciona o Tipo Input;
Disabled: Desabilita o Input;
Hidden: Esconde a imagem;
Required: Verifica se é obrigatório;
Rounded: Arredondar o Input;
Label: Título do Input;
Placeholder: Texto que ficará no input;
Name: Nome do componente
Value: Valor do componente

## Texto

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/oYPOJFKWx9se8MNgPh1U4_.blob" size="20" width="74" height="90" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/QE7Iv_v80bOzPMefVZkO4_.blob" size="50" width="347" height="148" position="center" showCaption="false"}

Propriedades do Text:
Hidden: Esconde o Text;
URL: URL de onde será feita a requisição.

## ListFetcher

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/fASr2F-RCPrs3DkM537Dy_.blob" size="14" width="83" height="89" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/t0Sxy0osdxGSYTtV43A3U_.blob" size="46" width="349" height="149" position="center" showCaption="false"}

Propriedades do ListFetcher:
Hidden: Esconde o ListFetcher;
URL: Url de onde será feita a requisição

## Mapa

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/xo3cbMy_vmvJl8Z-vyZtC_.blob" size="18" width="74" height="89" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/EWMSncipg618SG6vtjzln_.blob" size="44" width="349" height="517" position="center" showCaption="false"}

Propriedades do Maps:
Hidden: Esconde o mapa;
Provider:

:::hint{type="info"}
Quando escolhida a opção "Google Maps".

- Google Maps:
  - Latitude:
  - Longitude:
- Markers
  - Title:
  - Description:
  - Latitude:
  - Longitude:
:::

## Select

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/d4SyQUs3gakKy0GIyXCXJ_.blob" size="18" width="72" height="88" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/bq8Dqa8hIOu3RjvT8fyzu_.blob" size="44" width="352" height="495" position="center" showCaption="false"}

Propriedades do Select:
Disabled: Desabilita o Select;
Hidden: Esconde o Select;
Rounded: Arredondar o Select;
Label: Título do Select;
Name:
Placeholder: Texto que aparecerá no componente;
Value:
Options: Opções que aparecerão.
Text: Texto da opção;
Value: Valor que será selecionado.

## TextArea

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/YbVGCctpUWfyOtWinMhVe_.blob" size="12" width="77" height="92" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/LLnqVDWQbqNYNZi0ibCP8_.blob" size="50" width="350" height="312" position="center" showCaption="false"}

Propriedades do TextArea:
Disabled: Desabilita o TextArea;
Hidden: Esconde o TextArea;
Label: Título do TextArea;
Name: Nome do componente
Placeholder: Texto que aparecerá no componente;
Value: Valor do componente

## WebView

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/7it1hW6JcnNYWVCYB7aDL_.blob" size="16" width="78" height="93" position="center" showCaption="false"}

::Image[]{src="https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/_kn9WsBGJbjCMxKXlKGK7_.blob" size="58" width="350" height="117" position="center" showCaption="false"}

Propriedades do WebView:
Hidden: Esconde o WebView;
URL: Url de onde será feita a requisição