CSS avançado no Dash

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

CSS para espaçamento entre objetos

O "Modelo de Caixa" vê cada elemento HTML como uma caixa em camadas:

Conteúdo do objeto (propriedades height e width)
Padding (fora do conteúdo)
Borda (entre o padding e a margem)
Margem (fora da borda, separa elementos)

Uma imagem de quatro retângulos concêntricos do menor para o maior. O menor tem a palavra content, o próximo anel é padding, depois border e o último é margin.

Adicionando uma borda

O argumento CSS border recebe três elementos:

'border':'A B C'
- A = espessura em pixels
- B = estilo (ex.: solid ou dotted)
- C = cor (ex.: red)

Uma borda no nosso app

dcc.Graph(figure=ecom_bar, 
 style={'width':'500px', 
        'height':'450px',
        'border':'5px dotted red'}
         )

Uma imagem com o título "Top Sales Categories"; abaixo, dentro de uma borda vermelha pontilhada, há um gráfico de barras horizontal com categorias no eixo y e total de pedidos no eixo x. Abaixo, fora da borda, há uma lista com as duas categorias líderes.

Espaçamento em CSS

Para definir o espaçamento de um elemento HTML:

Especifique quatro números por propriedade (Padding e Margin)
- Sentido horário: topo, direita, base, esquerda
Alternativa: um número (aplica em todos os lados)
Alternativa: dois números para topo-base e esquerda-direita

Ex.: 'padding':'10px 5px 5px 15px'

Uma imagem do modelo de caixa com a camada de padding numerada em cada lado. No sentido horário a partir do topo: 10, 5, 5, 10.

Adicionando padding no Dash

Sem padding:

A mesma imagem de antes ilustrando o conceito de borda. Um título "Top Sales Categories"; abaixo, dentro de uma borda vermelha pontilhada, um gráfico de barras horizontal. Abaixo, fora da borda, uma lista com as duas categorias líderes.

Adicionando 'padding':'100px':

A mesma imagem do lado esquerdo, porém a borda foi empurrada para fora em todos os lados, com setas indicando isso. Há mais espaço ao redor do gráfico e do título dentro da borda; o texto abaixo foi afastado.

Adicionando margem no Dash

Sem margem:

Adicionando margin: 100px auto:

Semelhante à imagem da direita no slide anterior, há setas indicando espaço extra. Porém, esse espaço fica fora da borda. O título e o texto abaixo foram afastados, mas o espaço entre a borda e o gráfico é o mesmo.

Centralizando com margem auto

Com: 'margin':'100px'

A mesma imagem de antes ilustrando o conceito de borda, porém com zoom out, e o gráfico central alinhado à esquerda, não ficando sob o título e acima do texto. Um título "Top Sales Categories"; abaixo, dentro de uma borda vermelha pontilhada, um gráfico de barras horizontal. Abaixo, fora da borda, uma lista com as duas categorias líderes.

Com: 'margin':'100px auto'

A mesma imagem de antes ilustrando o conceito de borda. O gráfico está centralizado sob o título e acima do texto. Um título "Top Sales Categories"; abaixo, dentro de uma borda vermelha pontilhada, um gráfico de barras horizontal. Abaixo, fora da borda, uma lista com as duas categorias líderes.

CSS para layout

Elementos não alinhando? Elementos HTML podem ser "inline" ou "block".

Inline aparecem na mesma linha
- Não têm propriedades de height/width (ou box)
- Exemplos: <strong>, <a>, <img>
Block empilham um sobre o outro, pois incluem quebra de linha
- Não dá para ter mais de um lado a lado
- Exemplos: <h1>, <div>
Existe também inline-block
- Permite definir height/width/box
- Podem ficar lado a lado

Elementos inline-block

<div style='width:50px;height:50px;
     background-color:blue'></div>
<div style='width:50px;height:50px;
     background-color:red
     ;display:inline-block'></div>
<div style='width:50px;height:50px;
     background-color:green;
     display:inline-block'></div>

Uma imagem de três pequenos quadrados coloridos em forma de L. Um quadrado azul empilhado sobre um vermelho, que tem um verde à sua direita.

Vamos praticar!

Construindo Dashboards com Dash e Plotly