带有标注线的网格仪表板
带有标注线的网格仪表板
提问于 2020-02-19 11:26:02
我正在尝试使用Dash from Plotly构建一个仪表板，该仪表板由一系列瓦片(文本)组成，如下图所示。
我正在尝试构建一个组件以重用它，并构建下面的布局。每个框包含一个标题、一个值和一个描述，如下所示。
是否有可用的组件？有没有人能帮我写一些基本的想法/代码？
提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-19 12:54:58
我推荐你去Dash Bootstrap Components (dbc)。
您可以使用嵌套在dbc.Row (行)组件中的dbc.Col (列)组件来生成您的布局。你可以在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])
])
])最好的办法可能是有一个函数来创建那些带有ids、标题和描述参数的卡片，以省去创建不同卡片的麻烦：
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')替换每个card。
另一个快速提示是col组件有一个参数width。您可以为一行中的每一列指定不同的值，以调整相对宽度。你可以在我上面链接的文档中了解更多。
希望这能帮上忙
奥利
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60299299
复制相关文章
相似问题
Kotlin -在map中成功存储错误类型的泛型函数
Kotlin中的密封类，不兼容类型错误无法返回父类型
kotlin中的javaClass返回意外类型
kotlin有返回迭代器的map函数吗？
错误Kotlin类型推断失败预期类型不匹配Map<MessageDestination，List<MessageSender>>被期望
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
