CSS avanzado en Dash

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

CSS para espaciado entre objetos

El "modelo de caja" considera cada elemento HTML como una caja con capas:

Contenido del objeto (propiedades height y width)
Padding (fuera del contenido)
Borde (entre padding y margin)
Margin (fuera del borde, separa elementos)

Una imagen de cuatro rectángulos concéntricos de menor a mayor. El más pequeño dice content, el siguiente padding, luego border y el último margin.

Añadir un borde

El argumento border en CSS tiene tres partes:

'border':'A B C'
- A = grosor en píxeles
- B = estilo (p. ej., solid o dotted)
- C = color (p. ej., red)

Un borde en nuestra app

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

Un título "Top Sales Categories"; debajo, dentro de un borde rojo punteado, un gráfico de barras horizontales con categorías menores en el eje y y pedidos totales en el eje x. Debajo, fuera del borde, una lista con las dos categorías principales.

Espaciado en CSS

Para definir el espacio de un elemento HTML:

Especifica cuatro números por propiedad (padding y margin)
- En el sentido horario: arriba, derecha, abajo, izquierda
O bien: un número (se aplica a todos los lados)
O bien: dos números para arriba-abajo y izquierda-derecha

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

Imagen del modelo de caja con la capa de padding numerada en cada lado. En el centro de cada lado hay un número. En sentido horario desde arriba: 10, 5, 5, 10

Añadir padding en Dash

Sin padding:

La misma imagen que antes para el concepto de borde. Un título "Top Sales Categories"; debajo, dentro de un borde rojo punteado, un gráfico de barras horizontales con categorías menores en el eje y y pedidos totales en el eje x. Debajo, fuera del borde, una lista con las dos categorías principales.

Añadiendo 'padding':'100px':

La misma imagen que a la izquierda, pero el borde se ha empujado hacia fuera por todos los lados, con flechas hacia atrás indicándolo. Hay más espacio alrededor del gráfico, y el título dentro del borde y el texto inferior se han alejado.

Añadir margin en Dash

Sin margin:

Añadiendo margin: 100px auto:

Similar a la imagen derecha de la diapositiva anterior, hay flechas indicando espacio extra. Sin embargo, este espacio está fuera del borde. El título y el texto inferior se han empujado hacia fuera, pero el espacio entre el borde y el gráfico es el mismo.

Centrar con margin auto

Con: 'margin':'100px'

Con: 'margin':'100px auto'

La misma imagen que antes del concepto de borde. El gráfico está centrado bajo el título y sobre el texto inferior. Un título "Top Sales Categories"; debajo, dentro de un borde rojo punteado, un gráfico de barras horizontales con categorías menores en el eje y y pedidos totales en el eje x. Debajo, fuera del borde, una lista con las dos categorías principales.

CSS para maquetación

¿Elementos sin alinear? Los elementos HTML pueden ser "inline" o "block".

Inline se renderizan en la misma línea
- No tienen propiedades de alto/ancho (ni caja)
- Ejemplos: <strong>, <a>, <img>
Block se apilan porque incluyen salto de línea
- No puede haber más de uno en paralelo
- Ejemplos: <h1>, <div>
También existe inline-block
- Permite alto/ancho/propiedades de caja
- Pueden ir en paralelo

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>

Una imagen de tres cajas de colores pequeñas en forma de L. Un cuadro azul encima de uno rojo, que tiene a su derecha uno verde.

¡Vamos a practicar!

Creación de paneles con Dash y Plotly