Componentes e Layouts<\/strong><\/p>\n\n\n\n

Definindo a Interface do Usu\u00e1rio (UI)<\/strong>: O c\u00f3digo come\u00e7a definindo a interface do usu\u00e1rio (UI), que \u00e9 a parte vis\u00edvel do aplicativo e onde todos os componentes visuais do dashboard s\u00e3o montados. No Bs4Dash, essa interface \u00e9 criada com a fun\u00e7\u00e3o bs4DashPage(), que organiza os principais elementos do layout, como a barra de navega\u00e7\u00e3o (navbar), a barra lateral (sidebar), o corpo do conte\u00fado (body), a barra de controle (controlbar), e o rodap\u00e9 (footer).<\/p>\n\n\n\n

Barra de Navega\u00e7\u00e3o (Navbar): <\/strong>A navbar \u00e9 a barra superior do dashboard e serve para exibir um t\u00edtulo ou outros elementos de navega\u00e7\u00e3o. No exemplo, o t\u00edtulo “Bs4Dash Example” \u00e9 exibido na barra superior, mas voc\u00ea pode personaliz\u00e1-la com bot\u00f5es, menus suspensos, e \u00edcones conforme necess\u00e1rio.<\/p>\n\n\n\n

Barra Lateral (Sidebar)<\/strong>: A sidebar funciona como um menu de navega\u00e7\u00e3o lateral onde os usu\u00e1rios podem escolher diferentes se\u00e7\u00f5es ou abas do dashboard. No exemplo, dois itens de menu s\u00e3o criados: “Home” e “Settings”. Cada item \u00e9 associado a uma aba espec\u00edfica no corpo do dashboard, permitindo que os usu\u00e1rios alternem entre essas abas.<\/p>\n\n\n\n

Body<\/strong>: O body \u00e9 a \u00e1rea principal onde o conte\u00fado do dashboard \u00e9 exibido. No exemplo, a estrutura \u00e9 definida usando bs4TabItems() para organizar as diferentes abas que o usu\u00e1rio pode acessar. Cada aba, como “Home” e “Settings”, \u00e9 definida por um bs4TabItem() e pode conter qualquer conte\u00fado que voc\u00ea deseja exibir, como gr\u00e1ficos, tabelas, ou texto.<\/p>\n\n\n\n

Controlbar: <\/strong>A controlbar \u00e9 uma barra lateral adicional que pode ser usada para exibir controles extras, como sliders, bot\u00f5es, ou configura\u00e7\u00f5es. No exemplo, a barra de controle cont\u00e9m um bs4Card() com um sliderInput() que permite ao usu\u00e1rio ajustar valores interativamente.<\/p>\n\n\n\n

Rodap\u00e9 (Footer)<\/strong>: O footer \u00e9 a se\u00e7\u00e3o na parte inferior do dashboard onde voc\u00ea pode adicionar informa\u00e7\u00f5es adicionais, como direitos autorais ou links para pol\u00edticas de privacidade. No exemplo, o rodap\u00e9 exibe textos personalizados \u00e0 esquerda e \u00e0 direita, oferecendo uma maneira discreta de incluir informa\u00e7\u00f5es importantes.<\/p>\n\n\n\n

Server<\/strong>: Por fim, o server \u00e9 onde a l\u00f3gica de backend do aplicativo \u00e9 implementada. Embora o exemplo fornecido n\u00e3o inclua nenhuma l\u00f3gica complexa, este \u00e9 o local onde voc\u00ea definiria rea\u00e7\u00f5es a intera\u00e7\u00f5es do usu\u00e1rio, como a gera\u00e7\u00e3o de gr\u00e1ficos ou a manipula\u00e7\u00e3o de dados com base nos inputs fornecidos na UI.<\/p>\n\n\n\n

Interatividade com <\/strong>Bs4Dash<\/strong><\/p>\n\n\n\n

O Bs4Dash oferece uma ampla variedade de widgets interativos, como sliders, inputs de texto, seletores de data, e gr\u00e1ficos din\u00e2micos, que podem ser facilmente incorporados em dashboards. Estes widgets s\u00e3o altamente customiz\u00e1veis e permitem que os usu\u00e1rios interajam diretamente com os dados apresentados. Por exemplo, voc\u00ea pode adicionar um sliderInput para filtrar dados num\u00e9ricos em gr\u00e1ficos ou tabelas, ou usar actionButtons para permitir que os usu\u00e1rios realizem a\u00e7\u00f5es espec\u00edficas, como atualizar gr\u00e1ficos ou aplicar filtros adicionais. Al\u00e9m disso, os gr\u00e1ficos din\u00e2micos podem ser atualizados em tempo real com base nas intera\u00e7\u00f5es do usu\u00e1rio, o que melhora a experi\u00eancia e a usabilidade do dashboard\u200b.<\/p>\n\n\n\n

Este exemplo mostra como criar um dashboard simples com widgets interativos como sliders e bot\u00f5es:<\/p>\n\n\n\n