Componentes

Nossos componentes estão subdivididos nas seguintes categorias

🖥️Layout

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.

Container

É a base para criação de projetos no gStudio.

É 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

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.

Dentro do campo de Theme é possível fazer a estilização completa do Design System do título

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.

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.

Rich Text Editor

Como explicar este componente

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.

Navegação

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

É 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á.

É necessário apenas adicionar a breadcrumb. A trilha e vinculação são feita automaticamente.

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.

A estilização do header é feita dentro do campo de Theme e segue as boas práticas do Design System.

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.

A estilização do Sidebar é feita dentro do campo de Theme e segue as boas práticas do Design System.

Interação

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

Checkbox

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.

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.

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.

Dynamic Form

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

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 Data.

🎞️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.

A gStudio possui uma biblioteca com uma série de ícones para ser utilizado em um projeto.

Image

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

Para adicionar um arquivo do tipo imagem no componente é necessário acrescentar o url da imagem desejada.

Gallery

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

Para acrescentar uma imagem no campo é necessário adicionar o url do arquivo desejado.

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

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.

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.

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.

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.

Word Cloud

Como explicar este componente.

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.