Python 网格仪表板，带绘图破折号

我试图用Dash构建一个仪表板，仪表板由一系列平铺文本组成，如下图所示

我正在尝试构建一个组件以重用它，并构建下面的布局。每个框将包含标题、值和说明，如下所示

有可用的组件吗？有人能帮我一些基本的想法/代码吗

提前谢谢

---

我建议您查看dbc

可以使用嵌套在dbc.Row-rows组件中的dbc.columns组件生成布局。你可以去看看

然后，对于我将要调用的实际“卡片”，可以使用dbc.Card组件。这是我的建议

下面是一些复制布局的示例代码：

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    dbc.CardBody(
        [
            html.H4("Title", id="card-title"),
            html.H2("100", id="card-value"),
            html.P("Description", id="card-description")
        ]
    )
)

layout = html.Div([
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card])
    ])
])

最好的办法可能是使用一个函数创建带有ID、标题和描述参数的卡片，以避免创建不同卡片的麻烦：

def create_card(card_id, title, description):
    return dbc.Card(
        dbc.CardBody(
            [
                html.H4(title, id=f"{card_id}-title"),
                html.H2("100", id=f"{card_id}-value"),
                html.P(description, id=f"{card_id}-description")
            ]
        )
    )

然后，您可以随意将每张卡片替换为“id”、“标题”、“说明”

另一个快速提示是col组件有一个参数width。可以为行中的每一列指定不同的值以调整相对宽度。你可以在我上面链接的文档中了解更多

希望这有帮助

---

奥利

我建议你检查一下dbc

可以使用嵌套在dbc.Row-rows组件中的dbc.columns组件生成布局。你可以去看看

然后，对于我将要调用的实际“卡片”，可以使用dbc.Card组件。这是我的建议

下面是一些复制布局的示例代码：

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    dbc.CardBody(
        [
            html.H4("Title", id="card-title"),
            html.H2("100", id="card-value"),
            html.P("Description", id="card-description")
        ]
    )
)

layout = html.Div([
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card])
    ])
])

最好的办法可能是使用一个函数创建带有ID、标题和描述参数的卡片，以避免创建不同卡片的麻烦：

def create_card(card_id, title, description):
    return dbc.Card(
        dbc.CardBody(
            [
                html.H4(title, id=f"{card_id}-title"),
                html.H2("100", id=f"{card_id}-value"),
                html.P(description, id=f"{card_id}-description")
            ]
        )
    )

然后，您可以随意将每张卡片替换为“id”、“标题”、“说明”

另一个快速提示是col组件有一个参数width。可以为行中的每一列指定不同的值以调整相对宽度。你可以在我上面链接的文档中了解更多

希望这有帮助

---

奥利

太酷了，谢谢！你知道我如何在Dash上直接使用HTML和CSS而不使用第三方库吗？@jack87只使用HTML和CSS会有点麻烦。你需要考虑使用html div，然后用float和clear css设计div的样式。我相信这不是100%确定的，因为我在设计dash应用程序时，尽量避免使用html。老实说，我已经开始使用dbc，就好像它是Dash的标准部分一样。除非对您进行简单的pip安装有任何限制，否则我真的建议您使用它。它清理了你的代码很多，涵盖了很多功能，这将需要单独的样式表和更先进的html技术等，这是非常酷的感谢！你知道我如何在Dash上直接使用HTML和CSS而不使用第三方库吗？@jack87只使用HTML和CSS会有点麻烦。你需要考虑使用html div，然后用float和clear css设计div的样式。我相信这不是100%确定的，因为我在设计dash应用程序时，尽量避免使用html。老实说，我已经开始使用dbc，就好像它是Dash的标准部分一样。除非对您进行简单的pip安装有任何限制，否则我真的建议您使用它。它清理了大量的代码，涵盖了许多需要单独的样式表和更高级的html技术等的功能。