Python、破折号 : how to add a KPI Card component to a dashboard

Question

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

这里是一个例子:

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;
}