橘子树下

学习园地

0%

【Sunflower】Dash应用程序实践（二）

发表于 更新于 分类于 Valine：

现在开始逐步构建页面布局中的元素。先从 Header 开始

1
2
3
4
5
6
7
8
9
10
11
12
13
# Generate Header
def generate_header():
    """
    :return: A Header
    """
    header = dbc.Row(
                [
                    dbc.Col(html.Img(id="plotly-image", src=app.get_asset_url("sunflower_logo.png"),style={"height": "2rem"}), width="auto"),
                    dbc.Col(html.H5("回测分析(Back Test analysis)", id="header-title")),
                ],
                id="header",
            )
    return header

代码详解：

该代码定义了一个 generate_header 函数，用于生成一个 Dash Bootstrap 网页的顶部标题栏 (Header)。此 Header 包含了一个图标和标题，并且它们按行布局排列。

  • 函数定义: generate_header()

    • 定义了一个返回 Header 的函数，不接受任何参数。

  • 创建 Header 内容:

    • header = dbc.Row([...]):

      • 创建了一个 Row 容器，使用 dash-bootstrap-components (简称 dbc) 中的 Row 组件，用于行布局。

    • 第一列 (dbc.Col):

      • dbc.Col(html.Img(...), width="auto"):
        • 这一列包含了一个图像元素 Img，图像的 src 路径由 app.get_asset_url("sunflower_logo.png") 指定，显示了名为 sunflower_logo.png 的图像文件。
        • width="auto"：让这一列宽度根据图像大小自适应。
        • style={"height": "2rem"}：设置图像的高度为 2rem。

    • 第二列 (dbc.Col):

      • dbc.Col(html.H5(...)):
        • 包含一个 H5 标题元素，显示文本为 “回测分析(Back Test analysis)”，ID 为 "header-title"。

  • Row 样式：

    • id="header"：给 Row 容器赋予 id 值 header，方便之后在样式或回调函数中引用。

备注

  • 行列布局：图像和标题文本在同一行中依次排列。

相关的 css 样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#header {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 4rem;
}

#header-title {
    font-family: Acumin;
    font-size: 1.5rem;
    font-weight: bold;
    color: #5cb3cc;
    margin-left: 1rem;
}

代码解释：

#header: 选择器为 id 为 header 的元素应用样式。

  • background-color: #ffffff;：设置背景颜色为白色。
  • display: flex;：将 #header 设为 flex 容器，以便其子元素按弹性布局排列。
  • flex-direction: row;：设置主轴为水平方向，使子元素按行排列。
  • align-items: center;：沿着交叉轴（垂直方向）居中对齐 #header 中的子元素。
  • height: 4rem;：设置 #header 的高度为 4rem，保证其在页面中占据适当的垂直空间。

#header-title：选择器为 id 为 header-title 的元素应用样式。

  • font-family: Acumin;：设置字体为 Acumin。
  • font-size: 1.5rem;：字体大小为 1.5rem，相对较大。
  • font-weight: bold;：设置字体粗细为 bold，使文字加粗。
  • color: #5cb3cc;：字体颜色为蓝绿色（#5cb3cc）。
  • margin-left: 1rem;：设置左外边距为 1rem，使其与前面的元素保持适当间距。

Logo 的设计可以用 logodesign 完成。

最终效果如图：