Componentes
Nossos componentes estão subdivididos nas seguintes categorias
Last updated
Was this helpful?
Nossos componentes estão subdivididos nas seguintes categorias
Last updated
Was this helpful?
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.
É 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.
É uma estrutura vazia que permite criar layout com colunas verticais e horizontais para adicionar componentes.
Como explicar este componente
Como explicar este componente
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.
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
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.
Como explicar este componente
É 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.
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.
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.
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.
Componentes que solicitam do usuário uma atividade a fim de realizar uma ação.
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 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.
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.
Categoria responsável por adicionar media em um projeto (ex: adicionar foto, ícones, galeria de imagem).
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.
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.
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.
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.
descrição
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.
Calendário dinâmico com opções com estilização de layout e definição de ações de evento e agendamento.
Tabela para listagem de dados e informações.
Um quadro que é possível estilizar espaço, adicionar componentes e formatar.
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.
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.
Como explicar este componente.
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.
Componente de visualização de dados em formato de barra de progresso. Pode ser utilizado em dashboards, visualização do progresso de ações.
Componente dinâmico de visualização de dados em formato de gráfico de barra individual ou comparativa.
Componente de visualização de dados em formato de gráfico de linhas com escalas
Componente de visualização de dados em formato de gráfico de pizza que pode ser dividido em seções.
