---
description: Nossos componentes estão subdivididos nas seguintes categorias
---

# Componentes

## 🖥️Layout&#x20;

Categoria em que estão os componentes que são responsáveis pela distribuição, estrutura base e definição de espaços do layout de um projeto.&#x20;

### **Container**

{% hint style="info" %}
É a base para criação de projetos no gStudio.
{% endhint %}

É uma estrutura vazia que permite adicionar os componentes que serão acrescentados em um projeto. Com os containers é possível definir e estilizar espaços, além de possuir configurações específicas de alinhamento e espaçamento.

### **Grid**

É uma estrutura vazia que permite criar layout com colunas verticais e horizontais para adicionar componentes.

### **Grid Item**

Como explicar este componente

### **Dynamic List**

Como explicar este componente

## :abc:**Texto**

São componentes que possibilitam trabalhar com textos, parágrafos, textos curtos e informações textuais de forma dinâmica e com diversas possibilidades de formatação.

### **Título**

Permite adicionar um campo de título com opções de estilização de formato, tipografia e cor.

Sua utilização ideal é para informações textuais curtas que precisam de destaque visual e respeitando a hierarquia tipográfica.

{% hint style="info" %}
Dentro do campo de Theme é possível fazer a estilização completa do Design System  do título
{% endhint %}

### **Texto**

Permite adicionar um campo de texto para acrescentar informações textuais, sejam textos curtos, parágrafos e afins. É possível fazer a edição e estilização dos textos.

A principal utilização do componente de texto são para situações com diversos caracteres, a exemplo de adicionar textos longos com diversos parágrafos, tópicos e afins.

{% hint style="info" %}
Para uma formatação mais completa do textos nós sugerimos que seja feita dentro do campo de Theme para seguir as boas práticas do Design System do projeto.
{% endhint %}

### Rich Text Editor

Como explicar este componente

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FZcOFGdvp9UqAmqrgazAX%2Fbadge.png?alt=media\&token=c1c4e232-0b69-4da6-b456-646fb5350b72)

### Badge

É um emblema digital que destaca informações curtas importantes. Com a badge é possível realizar vários tipos de customização de estilo.

Sua principal utilização é como tag em um projeto, mas também pode ser uma identificação ou detalhe de uma informação de destaque.&#x20;

## :mouse\_three\_button:**Navegação**

São componentes com a finalidade de fazer ligação entre caminhos na navegação de páginas.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FodFTzVUE7kFebiq15pa2%2Fbradcrumb.png?alt=media\&token=3e863980-544c-4be5-9a17-e62db344af3d)

### **BreadCrumb**

É uma trilha de navegação que auxilia o acesso entre duas ou mais páginas em um projeto.

Ideal para ajudar o usuário a ter um acesso otimizado entre as páginas existentes e indicar a localização atual e as páginas que passou até chegar onde está.

{% hint style="info" %}
É necessário apenas adicionar a breadcrumb. A trilha e vinculação são feita automaticamente.
{% endhint %}

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2Fdm72X7e2mSzTh67gfSOY%2Fheader.png?alt=media\&token=f9894610-d709-4483-ad22-8b789d2b0b1a)

### Header

O cabeçalho de um projeto é o elemento central que faz a navegação entre as páginas através de seções. É possível também adicionar um logotipo.

O header define de forma fácil a navegação em um site além de evidenciar ações importantes (ex: cta, fazer login e etc) que precisam ser destacadas.

{% hint style="info" %}
A estilização do header é feita dentro do campo de Theme e segue as boas práticas do Design System.
{% endhint %}

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FyI1VIp5HY3ChIjWgLmpE%2Fsidebar.png?alt=media\&token=507d7986-f27d-4492-97a7-a1653ef67c4b)

### **Sidebar**

Barra lateral de um projeto que divide as páginas em seções. É possível adicionar um logotipo, ícones e botões.

Com a sidebar é possível organizar o acessos das páginas em forma de lista, adicionar um campo de login e ícones. Ela fica visível no campo esquerdo de um projeto e tem a opção de ser fixa ou retrátil.

{% hint style="info" %}
A estilização do Sidebar é feita dentro do campo de Theme e segue as boas práticas do Design System.
{% endhint %}

## :point\_up\_2:Interação

Componentes que solicitam do usuário uma atividade a fim de realizar uma ação.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FccCBC1X3T48jFpOE4ZWy%2Fcheckbox.png?alt=media\&token=4c1bfba7-3b83-45d7-81fe-17cbf4519b90)

### Checkbox&#x20;

Um box interativo que pode ser marcado ou desmarcado com uma ação

São utilizados quando há listas de opções e o usuário pode selecionar qualquer número de opções, incluindo zero, uma ou várias. Cada checkbox é independente de todos os demais.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FWaxm0mSmntw7A2ZdIjvf%2Fmenu.png?alt=media\&token=777a4d1f-d47c-4e47-b91e-37f5c89ef1bd)

### Menu

Box dropdown de um menu que possibilita operações de estilização do componente, navegação de rotas de páginas, vinculação de dados e notificação de atividades.

É possível adicionar diversas opções dentro do menu e criar operações diferentes para cada uma.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FmwbzMb9lxmfgpyya4450%2Fimage4.png?alt=media\&token=9ac11c39-744a-4a6e-8ee7-96e234dd0a52)

### Botão

Botão dinâmico que define ações em uma página ou concluir uma operação em um formulário, projeto ou diálogo. O componente de botão tem uma estilização de formato e dimensão seguindo as práticas do Design System.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FGVrC5TfeICBOCkx2bugK%2Fdynaic-form.png?alt=media\&token=7dbe2a85-88f6-43cc-a369-8300d781d2ae)

### **Dynamic Form**

Um formulário dinâmico que é possível fazer o preenchimento de informações e captação de dados.

{% hint style="info" %}
A estruturação dos dados que irão para um formulário dinâmico é feita com a criação de uma coleção de dados no campo de Dat&#x61;**.**
{% endhint %}



## 🎞️**Media e ícones**

Categoria responsável por adicionar media em um projeto (ex: adicionar foto, ícones, galeria de imagem).

### Icon

Adiciona um ícone com customização de cor e tamanho.

{% hint style="info" %}
A gStudio possui uma biblioteca com uma série de ícones para ser utilizado em um projeto.
{% endhint %}

### Image

Adiciona um campo específico para definir uma imagem. É possível fazer a estilização da imagem em formato e dimensão.

{% hint style="info" %}
Para adicionar um arquivo do tipo imagem no componente é necessário acrescentar o url da imagem desejada.
{% endhint %}

### **Gallery**

Adiciona um campo customizável de galeria para adicionar uma série de imagens.

{% hint style="info" %}
Para acrescentar uma imagem no campo é necessário adicionar o url do arquivo desejado.
{% endhint %}

### **Stories**

Adiciona uma galeria de stories com tempo de visualização. O componente permite inserir textos, imagens e links para outras páginas.

O componente permite adicionar diversos stories, customizar a dimensão e visualizar em looping.

## 🗂️Data

descrição

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2F9DikF9TK0zC4hNj3ObQx%2Fboards.png?alt=media\&token=17012dec-3a88-4ffc-bfaf-81b469c7a254)

### Board

Um quadro dividido em colunas que apresenta categorias de progresso, descrição e envolvidos em uma atividade. É possível adicionar diversos quadros e customizar as quantidades de colunas.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2Fgd7ueJUUQorQXEQbZb6b%2Fcalendario.png?alt=media\&token=00c15c5f-5a84-45b2-9246-ce514f9d6c3e)

### **Calendar**

Calendário dinâmico com opções com estilização de layout e definição de ações de evento e agendamento.

### **Table**

Tabela para listagem de dados e informações.

### **Card**

Um quadro que é possível estilizar espaço, adicionar componentes e formatar.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2Fm7I0weHj0d1PgCsy5sE8%2Faccordion.png?alt=media\&token=ca491838-8423-49fd-ab9d-8c70049ece67)

### **Accordion**

Bloco que organiza as informações em tópicos retrateis e que possibilita que a exibição de cada item seja feito de forma individual com um dropdown.

## 📈Visualização de dados

Os componentes desta categoria são responsáveis pela visualização de dados e informações que são representados por gráficos.&#x20;

{% hint style="info" %}
Para a visualização das informações nos componentes dinâmicos de dados é necessário que seja cadastrado e criado uma coleção de dados e definida algumas informações referentes a categoria e valor.&#x20;
{% endhint %}

### **Word Cloud**

Como explicar este componente.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FW5v8YQyGytfvxaNzhmxb%2Fcirculo-progresso.png?alt=media\&token=ca37d776-7d76-49d9-9269-f5b542eb6fa9)

### **Circular Progress**

Componente de visualização de dados em formato de gráfico circular de progresso. Pode ser utilizado em dashboards, visualização do progresso de ações.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FQA0GqbRB0VPcuzFPxzPU%2Fbarra-progresso.png?alt=media\&token=2fea1c17-d987-4819-a9f0-9d1fe6fe6234)

### **Progress**

Componente de visualização de dados em formato de barra de progresso. Pode ser utilizado em dashboards, visualização do progresso de ações.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FLSgTRf0fvOupmiwaEiT3%2Fgrafico_barra.png?alt=media\&token=69f72d4a-634a-494e-9726-5a1c4886c4bb)

### **Bar chart**

Componente dinâmico de visualização de dados em formato de gráfico de barra individual ou comparativa.

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2FtBwlfkzSX9w2Mv9UUBLZ%2Fgrafico-linear.png?alt=media\&token=605ac88c-2a77-4ebd-a0c3-23b736ecf356)

### **Line Chart**

Componente de visualização de dados em formato de gráfico de linhas com escalas

![](https://2521996071-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FtPmYzCa92i9Jm8pq5V%2Fuploads%2F2UcsrSQHwGTIfKBa9Tzg%2Fgrafico-pizza.png?alt=media\&token=09e785eb-7fb8-4ee1-9421-d98a653a7885)

### Pie Chart

Componente de visualização de dados em formato de gráfico de pizza que pode ser dividido em seções.

