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

Tabs e Menus com Dropdown em aplicações Dash

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.

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

Até daqui a pouco!! :D