Python，Dash：如何将KPI卡组件添加到仪表板

Question

我是Dash的新手，我正在寻找一个用于创建KPI卡的组件（dash_core_component），可以在其中显示单个值和简短说明。

这里有个例子：

Answer 1

它不是dash_core_component，但是您可以使用Cards from the bootstrap dash components创建类似这样的内容：

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    [
        dbc.CardHeader("Marketing"),
        dbc.CardBody(
            [
                html.H4("201 new Leads", className="card-title"),
                html.P("Delivered this week compared...", className="card-text"),
            ]
        ),
    ],
    style={"width": "30rem"},
)

添加到您的CSS文件：

.card-text {
  color: #999999;
  margin-bottom: 7.5px;
  display: block;
}

.card-title {
  font-weight: bold;
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 7.5px;
}