Dash-Stil-Design

Bei der Entwicklung interaktiver Webanwendungen ermöglicht Dash nicht nur die Verwendung von Python zum Erstellen komplexer Anwendungen, sondern bietet auch umfangreiche Styling-Optionen, damit Ihre Anwendungen professioneller und ausgefeilter aussehen.

In Dash wird Styling durch CSS umgesetzt. Dash bietet mehrere Möglichkeiten, Komponentenstile festzulegen, darunter:

  • Inline-Stil: durchstyleLegen Sie Komponentenstile direkt über Eigenschaften fest.

  • Externe CSS-Datei: Legen Sie globale Stile durch Laden externer CSS-Dateien fest.

  • Dash Bootstrap Components: Verwenden Sie Komponenten und Stile im Bootstrap-Stil.

  • Dash DAQ: Gestalten Sie Komponenten für die Erstellung von Anwendungen zur Datenerfassung und -steuerung.

1. Inline-Stile

Durch das style-Attribut können Sie CSS-Stile direkt für Komponenten festlegen. style ist ein Wörterbuch, dessen Schlüssel CSS-Eigenschaften und dessen Werte CSS-Werte sind.

Beispiel

from dash import Dash, html

# Dash-App erstellen
app = Dash(__name__)

# Layout definieren
app.layout = html.Div(
    style={
        'backgroundColor': 'lightblue',  # Hintergrundfarbe
        'padding': '20px',  # Innenabstand
        'borderRadius': '10px',  # Abgerundete Ecken
        'textAlign': 'center'  # Text zentrieren
    },
    children=[
        html.H1("Willkommen bei Dash", style={'color': 'darkblue'}),
        html.P("Dies ist ein gestyltes Div.")
    ]
)

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Ausführungseffekt:

  • Die Hintergrundfarbe ist hellblau, der Innenabstand beträgt 20px, der Eckenradius beträgt 10px und der Text ist zentriert.

  • Die Textfarbe des Titels ist dunkelblau.

2. Externe CSS-Datei

Durch das Laden externer CSS-Dateien können Sie globale Stile für die gesamte Anwendung festlegen.

  1. Erstellen Sie eine CSS-Datei (z. B.assets/styles.css）。

  2. Laden Sie CSS-Dateien in einer Dash-Anwendung.

CSS-Dateibeispiel (assets/styles.css):

Beispiel: Datei assets/styles.css

/* Globale Schriftart festlegen */
body {
    font-family: Arial, sans-serif;
}

/* Titelstile festlegen */
h1 {
    color: darkblue;
    text-align: center;
}

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

Dash verwendet CSS-Dateien:

Beispiel

from dash import Dash, html

# Dash-App erstellen
app = Dash(__name__)

# Layout definieren
app.layout = html.Div(
    className='custom-div',  # CSS-Klassennamen verwenden
    children=[
        html.H1("Willkommen bei Dash"),
        html.P("Dies ist ein gestyltes Div.")
    ]
)

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Ausführungseffekt:

  • Anwendung wird geladenassets/styles.cssStile in der Datei.

  • h1Die Überschrift ist dunkelblau und zentriert.

  • DivDie Hintergrundfarbe ist hellblau, mit Padding und abgerundeten Ecken.

3. Dash Bootstrap Components

Dash Bootstrap Components (dash-bootstrap-components) ist eine Bibliothek von Drittanbietern, die Bootstrap-ähnliche Komponenten und Stile bereitstellt. Sie kann dabei helfen, schnell schöne Dash-Anwendungen zu erstellen.

pip install dash-bootstrap-components

Beispiel

from dash import Dash, html
import dash_bootstrap_components as dbc

# Dash-App erstellen
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# Layout definieren
app.layout = dbc.Container(
    children=[
        dbc.Row(
            dbc.Col(
                html.H1(Willkommen bei Dash Bootstrap, className="text-center text-primary")
            )
        ),
        dbc.Row(
            dbc.Col(
                dbc.Card(
                    children=[
                        dbc.CardHeader("Kartentitel"),
                        dbc.CardBody(
                            children=[
                                html.P("Dies ist eine Karte im Bootstrap-Stil.", className="card-text")
                            ]
                        )
                    ],
                    className="mt-4"  # margin festlegen
                )
            )
        )
    ]
)

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Ausführungseffekt:

  • Bootstrap-Theme-Stile verwenden.

  • Der Titel ist zentriert und wird in Theme-Blau angezeigt.

  • Die Card-Komponente enthält einen Titel und Inhalt mit einem eleganten Stil.

4. Dash DAQ

Dash DAQ ist eine Komponentenbibliothek zum Erstellen von Datenerfassungs- und Steuerungsanwendungen und bietet eine umfangreiche Sammlung gestalteter Komponenten.

pip install dash-daq

Beispiel

from dash import Dash, html
import dash_daq as daq

# Dash-App erstellen
app = Dash(__name__)

# Layout definieren
app.layout = html.Div(
    style={'textAlign': 'center'},
    children=[
        daq.Thermometer(
            id='thermometer',
            value=25,
            min=0,
            max=100,
            label="Thermometer",
            style={'margin': '20px'}
        ),
        daq.Gauge(
            id='gauge',
            value=50,
            min=0,
            max=100,
            label="Druckmessgerät",
            style={'margin': '20px'}
        )
    ]
)

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Ausführungseffekt:

  • Zeigen Sie ein Thermometer und ein Druckmessgerät an, beide mit einem eleganten Stil.

  • Die Komponente wird mit Rändern zentriert.

Weitere Erweiterungen