Diseño de estilos Dash

Al desarrollar aplicaciones web interactivas, Dash no solo te permite usar Python para construir aplicaciones complejas, sino que también ofrece ricas opciones de diseño de estilos para que tus aplicaciones se vean más profesionales y atractivas.

En Dash, el diseño de estilos se implementa mediante CSS. Dash ofrece varias formas de establecer los estilos de los componentes, incluyendo:

  • Estilos en línea: a través delstyleatributo style se establece directamente el estilo de los componentes.

  • Archivo CSS externo: mediante la carga de un archivo CSS externo se establecen estilos globales.

  • Dash Bootstrap Components: usar componentes y estilos con estilo Bootstrap.

  • Dash DAQ: componentes de estilo para crear aplicaciones de adquisición de datos y control.

1. Estilos en línea

Mediante el atributo style se pueden establecer directamente estilos CSS para los componentes. style es un diccionario cuyas claves son propiedades CSS y cuyos valores son valores CSS.

Ejemplo

from dash import Dash, html

# Crear aplicación Dash
app = Dash(__name__)

# Definir diseño
app.layout = html.Div(
    style={
        'backgroundColor': 'lightblue',  # Color de fondo
        'padding': '20px',  # Relleno
        'borderRadius': '10px',  # Bordes redondeados
        'textAlign': 'center'  # Texto centrado
    },
    children=[
        html.H1(¡Bienvenido a Dash!, style={'color': 'darkblue'}),
        html.P(Este es un Div con estilos.)
    ]
)

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)

Resultado:

  • El color de fondo es azul claro, el relleno es de 20px, el radio de borde es de 10px y el texto está centrado.

  • El color del texto del título es azul oscuro.

2. Archivo CSS externo

Al cargar un archivo CSS externo, se pueden establecer estilos globales para toda la aplicación.

  1. Crear un archivo CSS (por ejemplo,assets/styles.css）。

  2. Cargar el archivo CSS en la aplicación Dash.

Ejemplo de archivo CSS (assets/styles.css):

Ejemplo: archivo assets/styles.css

/* Establecer fuente global */
body {
    font-family: Arial, sans-serif;
}

/* Establecer estilo del título */
h1 {
    color: darkblue;
    text-align: center;
}

/* Establecer estilo del Div */
.custom-div {
    background-color: lightblue;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

Dash usa archivos CSS:

Ejemplo

from dash import Dash, html

# Crear aplicación Dash
app = Dash(__name__)

# Definir diseño
app.layout = html.Div(
    className='custom-div',  # Usar nombre de clase CSS
    children=[
        html.H1(¡Bienvenido a Dash!),
        html.P(Este es un Div con estilos.)
    ]
)

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)

Resultado:

  • La aplicación cargaassets/styles.csslos estilos del archivo.

  • h1El color del título es azul oscuro y se muestra centrado.

  • DivEl color de fondo es azul claro, con relleno y bordes redondeados.

3. Dash Bootstrap Components

Dash Bootstrap Components (dash-bootstrap-components) es una biblioteca de terceros que proporciona componentes y estilos con estilo Bootstrap. Ayuda a crear rápidamente aplicaciones Dash atractivas.

pip install dash-bootstrap-components

Ejemplo

from dash import Dash, html
import dash_bootstrap_components as dbc

# Crear aplicación Dash
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Definir diseño
app.layout = dbc.Container(
    children=[
        dbc.Row(
            dbc.Col(
                html.H1(¡Bienvenido a Dash Bootstrap!, className="text-center text-primary")
            )
        ),
        dbc.Row(
            dbc.Col(
                dbc.Card(
                    children=[
                        dbc.CardHeader(Título de la tarjeta),
                        dbc.CardBody(
                            children=[
                                html.P(Esta es una tarjeta de estilo Bootstrap., className="card-text")
                            ]
                        )
                    ],
                    className="mt-4"  # Establecer margen
                )
            )
        )
    ]
)

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)

Resultado:

  • Usa el estilo de tema Bootstrap.

  • El título se muestra centrado y su color es el azul del tema.

  • El componente de tarjeta tiene título y contenido, con un estilo atractivo.

4. Dash DAQ

Dash DAQ es una biblioteca de componentes para crear aplicaciones de adquisición de datos y control, que ofrece abundantes componentes de estilo.

pip install dash-daq

Ejemplo

from dash import Dash, html
import dash_daq as daq

# Crear aplicación Dash
app = Dash(__name__)

# Definir diseño
app.layout = html.Div(
    style={'textAlign': 'center'},
    children=[
        daq.Thermometer(
            id='thermometer',
            value=25,
            min=0,
            max=100,
            label=Termómetro,
            style={'margin': '20px'}
        ),
        daq.Gauge(
            id='gauge',
            value=50,
            min=0,
            max=100,
            label=Manómetro,
            style={'margin': '20px'}
        )
    ]
)

# Ejecutar la aplicación
if __name__ == '__main__':
    app.run_server(debug=True)

Resultado:

  • Muestra un termómetro y un manómetro, con un estilo atractivo.

  • Los componentes se muestran centrados y con margen.

Otras extensiones