列之间的垂直线 - Plotly-Dash

Question

给定以下仪表板示例：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

app.layout = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(html.P("Item 1")),
                    dbc.Col(html.P("Item 2")),
                    dbc.Col(html.P("Item 3")),
                ]
            ),
            dbc.Row(
                [
                    dbc.Col(html.P("Item 4")),
                    dbc.Col(html.P("Item 5")),
                    dbc.Col(html.P("Item 6")),

                ]
            ),

            dbc.Row(dbc.Col(html.P("Some more content..."))),
        ]
)

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

如何按以下方式在列之间添加可自定义的垂直线？

请注意，这些行跨越多行（此处为 2）。谢谢！

Answer 1

您可以添加自定义 css，方法是将资产文件夹添加到您的应用并添加包含以下内容的 style.css 文件（用于添加蓝色实线 - 根据需要进行自定义）

.column_left {
  border-right: 5px solid #3333ff;
}

第二件事是在布局中分隔列，如下所示：

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

leftside_col = dbc.Col([
    html.P("Item 1"),
    html.P("Item 4")
], className='column_left')

center_col = dbc.Col([
    html.P("Item 2"),
    html.P("Item 5")
], className='column_left')

rightside_col = dbc.Col([
    html.P("Item 3"),
    html.P("Item 6")
])
app.layout = html.Div([
            dbc.Container([
                dbc.Row([
                    leftside_col,
                    
                    center_col,
                    
                    rightside_col    
                ]),
                html.Hr(),
                dbc.Row(dbc.Col(html.P("Some more content...")))
            ]),
])

if __name__ == "__main__":
    app.run_server(debug=False)

该应用程序如下所示：

列之间的垂直线 - Plotly-Dash

Vertical lines between columns - Plotly-Dash

python-3.x

plotly-dash