# Componentes ## šŸ–„ļø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** {% 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. ## :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 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 Data**.** {% 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. {% 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. {% 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.