【问题标题】:Python + Dash + BootstrapPython + 破折号 + 引导
【发布时间】:2020-07-06 16:30:45
【问题描述】:

我正在尝试在函数中“Pythonify”卡片生成,但它似乎没有弹出。也许我做错了什么,或者我正在构建的仪表板需要非常垂直。基本上,cardify 函数不会生成卡片。

提前感谢您的帮助!


import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(external_stylesheets=[dbc.themes.MINTY])

def cardify(metricname, metricvalue, recapstring):
    dbc.Card(
        [
            dbc.CardBody(
                [
                    html.H2(metricname, className="card-title"),
                    html.H4(metricvalue, className="card-title"),
                    html.P(
                        recapstring,
                        className="card-text",
                    ),
                ]
            ),
        ],
#        style={"width": "18rem"},
        )

app.layout =  \
html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    cardify("Card Title", "Metric Value", "Some Quick Example yada yada"),
                    width={"size": 2, "order": 1, "offset": 1},
                ),
                dbc.Col(
                    dbc.Card(
                    [
                        dbc.CardBody(
                            [
                                html.H4("Card title", className="card-title"),
                                html.P(
                                    "Some quick example text to build on the card title and "
                                    "make up the bulk of the card's content.",
                                    className="card-text",
                                ),
                            ]
                        ),
                    ],
#                    style={"width": "18rem"},
                    ),
                    width={"size": 2, "order": 2},
                )           
            ]
        ),
    ]
)
if __name__ == "__main__":
    app.run_server(debug=True)

【问题讨论】:

    标签: python css bootstrap-4 plotly-dash


    【解决方案1】:

    你的函数cardify需要返回dbc.Card。

    【讨论】:

    • 是的! ::facepalm::
    猜你喜欢
    • 2020-09-30
    • 2013-10-09
    • 2019-03-09
    • 1970-01-01
    • 2021-06-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-07
    相关资源
    最近更新 更多