我正在尝试使用由Plotly组成的Dash构建仪表板,该仪表板由一系列图块(文本)组成,如下图所示。
我正在尝试构建一个组件以重用它,以构建下面的布局。每个框将包含一个标题,一个值和一个说明,如下所示。
有没有可用的组件?有人可以为我提供任何基本的想法/代码吗?
提前致谢!
最佳答案
我建议您检出Dash Bootstrap Components(dbc)。
您可以使用嵌套在dbc.Col
(行)组件中的dbc.Row
(列)组件来生成布局。您可以将它们检出here。
然后,对于我称之为“卡片”的实际“卡片”,可以使用dbc.Card
组件。这是link。
这是一些复制布局的示例代码:
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")
]
)
)
然后,您可以根据需要用
card
替换每个create_card('id', 'Title', 'Description')
。另一个快速提示是
col
组件具有参数width
。您可以为行中的每一列赋予不同的值以调整相对宽度。您可以在我上面链接的文档中了解有关此内容的更多信息。希望这可以帮助,
奥利