Parte 04— Bootstrap com o Dash, conhecendo o Dash Bootstrap Component

Tabs e Menus com Dropdown em aplicações Dash

Tiago Augusto Ferreira
Oct 15 · 2 min read
Image for post
Image for post

Vamos caminhando para o fechamento do nosso layout. Nesta etapa vamos:

  • Editar o arquivo layout.py dentro da pasta construtores;
  • Criar as nossas Tabs e montar o grid;
  • Montar o menu de Filtros (Clube, Posição e Jogador);
  • Inserir um elemento do tipo Graph na segunda coluna do Grid;

Sem mais enrolação, vamos para o arquivo auxiliar.

Em alguns momentos durante a montagem do seu layout você precisará utilizar elementos repetidos, modificando-se somente alguns parâmetros e se você colocar tudo dentro de um mesmo arquivo terá ao final um código de difícil manutenção. Pensando nisto, vamos inserir o seguinte código dentro da nossa estrutura de construtores.

O código acima é responsável por criar o menu com os filtros para identificarmos os jogadores.

Voltando para o arquivo layout.py, para montar o grid das nossas Tabs (vamos revisar o que são as Tabs?) o processo será bem simples. A primeira etapa será criar dois objetos (tab_01 e tab_02) e montar o grid dentro de cada um (uma linha e duas colunas dentro desta linha). Vejam:

Com base em nosso wireframe, sabemos que no lado esquerdo teremos os menus com os filtros e no lado direito o gráfico. Como já criamos em nosso construtor o método para a montagem do menu, vamos só inserir o trecho abaixo logo após a importação de bibliotecas.

Com as variáveis criadas, substitua os textos “ELEMENTO_COLUNA_01” e “ELEMENTO_COLUNA_02” pelas variáveis controle_01 e controle_02 (coloque-as sem aspas).

A próxima etapa será criar os ids para os gráficos e os componentes que serão inseridos na segunda coluna. Para isto, adeque o seu código para que fique conforme o exemplo abaixo:

Perfeito! Neste ponto temos as duas tabs com suas estruturas de colunas criadas, agora só precisamos colocá-las dentro da estrutura dbc.Tabs e inserir este componente dentro do nosso layout. Ao final, seu arquivo layouts.py deverá ficar da seguinte forma:

Se tudo correu bem, você já poderá visualizar o seu grid com as duas colunas, menus, tabs e gráficos montados.

Image for post
Image for post

Na próxima parte (está acabando!!!!) vamos fazer a aquisição de dados, callbacks e o deploy.

Até daqui a pouco!! :D

Blog oficial da comunidade Data Hackers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store