如何正确地为我的 Dash App 添加样式？

Question

我无法将 CSS 样式正确添加到我的 Dash 应用程序。

我想创建一个仪表板，左侧有一个侧栏，右侧有一个顶部栏，其中包含一些指标和下面的图表，如下所示：

所以，在我的 App.py 文件中我有：

app = dash.Dash()
app.layout = html.Div(
            className="content",
            children=[

html.Div(
    className="left_menu",
    children=[
        html.Div(
            'This is the left menu'
        ),
    ]
),

html.Div(
    className="right_content",
    children=[
        html.Div(
            className="top_metrics",
            children=[
            'This is top metrics'
            ]
        ),
        html.Div(
            'This down top metrics'
        ),
    ]
),

if __name__ == '__main__':
app.run_server(debug=True)

和 css 文件：

.content{
 width: 100%;
 background: #F7F7F7;
 }

.right_content{
 width:85%;
 position:absolute;
 top: 0;
 right: 0; 
 }

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:85%;
 position:absolute;
 top: 0;
 right: 0;
 }

.left_menu {
 width: 15%;
 position: absolute;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 999;
 background: #2A3F54;
}

但是，我明白了：

我不明白为什么 "This down top metrics" 出现在那里而不是低于 "top metrics"

Answer 1

这里为您的 .top_metrics 做以下工作：

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:100%;
 position:relative;
 top: 0;
 right: 0;
 }

但我建议您使用 bootstrap，您不必写 css，只需包含 class 名称在你的 div 上。

Bootstrap 提供 css 可以让您 class 构建布局，html div 具有针对不同屏幕尺寸的响应式设计。

如何正确地为我的 Dash App 添加样式？

How to properly add style to my Dash App?

python

dashboard

plotly-dash