python-3.x - 列之间的垂直线 - Plotly-Dash
问题描述
给定以下仪表板示例:
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)。谢谢 !
解决方案
您可以通过将资产文件夹添加到您的应用程序并添加style.css
具有以下内容的文件来添加自定义 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)
推荐阅读
- python - 文本位置在图表上自动更改
- python - pip3 在哪里下载 Ubuntu 16.04 中的 .whl 文件?
- python - 如何测试 Python 数独类
- documentum - 无法使用 DFC 删除 documentum 应用程序中的文档
- sql - 在数据映射中将 UNIQUEIDENTFIER 值与可能的 varchar 分开
- python - 遍历逗号分隔的整数文件以使用 chr() 函数
- r - 合并来自两列的信息并在 R 中扩展数据框
- angular - 订阅Angular后调用方法
- javascript - 如何在 MS Edge 中可靠地检测触摸设备
- hyperledger-fabric - Hyperledger Fabric 中的资产、参与者和交易