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

Question

我正试图用Dash构建一个仪表板，它由一系列图块（文本）组成，如下图所示。

我试图构建一个组件来重用它，并构建下面的布局。每个框将包含标题、值和描述，如下所示。

有可用的组件吗？有人可以帮助我任何基本的想法/代码？

提前谢谢！

Answer 1

我建议检查破折号引导组件（dbc）。

可以使用嵌套在dbc.Row（行）组件中的dbc.Col（列）组件生成布局。你可以在这里查看。

然后，对于我将要调用的实际“卡片”，您可以使用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")
            ]
        )
    )

然后，您可以根据需要将每个卡替换为create_card（'id'，'title'，'description ption'）。

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

希望这有帮助，

奥利