Dash 样式设计

在开发交互式 Web 应用程序时，Dash 不仅允许你使用 Python 来构建复杂的应用程序，还提供了丰富的样式设计选项，使你的应用程序看起来更加专业和美观。

在 Dash 中，样式设计是通过 CSS 实现的。Dash 提供了多种方式来设置组件的样式，包括：

  • 内联样式：通过 style 属性直接设置组件的样式。

  • 外部 CSS 文件：通过加载外部 CSS 文件设置全局样式。

  • Dash Bootstrap Components：使用 Bootstrap 风格的组件和样式。

  • Dash DAQ：用于创建数据采集和控制应用的样式组件。

1. 内联样式

通过 style 属性可以直接为组件设置 CSS 样式。style 是一个字典，键是 CSS 属性，值是 CSS 值。

实例

from dash import Dash, html

# 创建 Dash 应用
app = Dash(__name__)

# 定义布局
app.layout = html.Div(
    style={
        'backgroundColor': 'lightblue',  # 背景颜色
        'padding': '20px',  # 内边距
        'borderRadius': '10px',  # 圆角
        'textAlign': 'center'  # 文字居中
    },
    children=[
        html.H1("欢迎使用 Dash", style={'color': 'darkblue'}),
        html.P("这是一个带样式的 Div。")
    ]
)

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

运行效果：

  • 背景颜色为浅蓝色，内边距为 20px，圆角为 10px，文字居中。

  • 标题文字颜色为深蓝色。

2. 外部 CSS 文件

通过加载外部 CSS 文件，可以为整个应用设置全局样式。

  1. 创建一个 CSS 文件（如 assets/styles.css）。

  2. 在 Dash 应用中加载 CSS 文件。

CSS 文件示例 (assets/styles.css)：

实例：assets/styles.css 文件

/* 设置全局字体 */
body {
    font-family: Arial, sans-serif;
}

/* 设置标题样式 */
h1 {
    color: darkblue;
    text-align: center;
}

/* 设置 Div 样式 */
.custom-div {
    background-color: lightblue;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

Dash 使用 css 文件：

实例

from dash import Dash, html

# 创建 Dash 应用
app = Dash(__name__)

# 定义布局
app.layout = html.Div(
    className='custom-div',  # 使用 CSS 类名
    children=[
        html.H1("欢迎使用 Dash"),
        html.P("这是一个带样式的 Div。")
    ]
)

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

运行效果：

  • 应用加载 assets/styles.css 文件中的样式。

  • h1 标题颜色为深蓝色，居中显示。

  • Div 背景颜色为浅蓝色，带内边距和圆角。

3. Dash Bootstrap Components

Dash Bootstrap Components（dash-bootstrap-components）是一个第三方库，提供了 Bootstrap 风格的组件和样式。它可以帮助快速构建美观的 Dash 应用。

pip install dash-bootstrap-components

实例

from dash import Dash, html
import dash_bootstrap_components as dbc

# 创建 Dash 应用
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# 定义布局
app.layout = dbc.Container(
    children=[
        dbc.Row(
            dbc.Col(
                html.H1("欢迎使用 Dash Bootstrap", className="text-center text-primary")
            )
        ),
        dbc.Row(
            dbc.Col(
                dbc.Card(
                    children=[
                        dbc.CardHeader("卡片标题"),
                        dbc.CardBody(
                            children=[
                                html.P("这是一个 Bootstrap 风格的卡片。", className="card-text")
                            ]
                        )
                    ],
                    className="mt-4"  # 设置外边距
                )
            )
        )
    ]
)

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

运行效果：

  • 使用 Bootstrap 主题样式。

  • 标题居中显示，颜色为主题蓝色。

  • 卡片组件带有标题和内容，样式美观。

4. Dash DAQ

Dash DAQ 是一个用于创建数据采集和控制应用的组件库，提供了丰富的样式组件。

pip install dash-daq

实例

from dash import Dash, html
import dash_daq as daq

# 创建 Dash 应用
app = Dash(__name__)

# 定义布局
app.layout = html.Div(
    style={'textAlign': 'center'},
    children=[
        daq.Thermometer(
            id='thermometer',
            value=25,
            min=0,
            max=100,
            label="温度计",
            style={'margin': '20px'}
        ),
        daq.Gauge(
            id='gauge',
            value=50,
            min=0,
            max=100,
            label="压力表",
            style={'margin': '20px'}
        )
    ]
)

# 运行应用
if __name__ == '__main__':
    app.run_server(debug=True)

运行效果：

  • 显示一个温度计和一个压力表，样式美观。

  • 组件居中显示，带外边距。