[英]How to divide a Python Dash checklist into several columns?
I'm a beginner in Dash and I have never coded in html so I'm not sure how all this works. 我是Dash的初学者,而且我从未用html编写过代码,因此我不确定这一切如何工作。
I've been trying to separate a checklist into several columns. 我一直试图将清单分成几列。
Here is a part of my code: 这是我的代码的一部分:
html.Div(
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'A1', 'value': 'I1ST1'},
{'label': 'A2', 'value': 'I2ST1'},
{'label': 'A3', 'value': 'I3ST1'},
{'label': 'A4', 'value': 'I4ST1'},
{'label': 'A5', 'value': 'I5ST1'},
{'label': 'A6', 'value': 'I6ST1'}
],
values='I1ST1',
labelStyle = {'display': 'block'}
),
),
html.Div(
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'B1', 'value': 'I1ST2'},
{'label': 'B2', 'value': 'I2ST2'},
{'label': 'B3', 'value': 'I3ST2'},
{'label': 'B4', 'value': 'I4ST2'},
{'label': 'B5', 'value': 'I5ST2'},
{'label': 'B6', 'value': 'I6ST2'}
],
values='I1ST2',
labelStyle = {'display': 'block'}
)
),
html.Div(
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'C1', 'value': 'I1MT'},
{'label': 'C2', 'value': 'I2MT'},
{'label': 'C3', 'value': 'I3MT'}
],
values='I1MT',
labelStyle = {'display': 'block'}
)
)
]
)
I currently got something like this : 我目前有这样的东西:
☒ A1
☐ A2
☐ A3
☐ A4
☐ A5
☐ A6
☒ B1
☐ B2
☐ B3
☐ B4
☐ B5
☐ B6
☒ C1
☐ C2
☐ C3
What I want looks like this: 我想要的是这样的:
☒ A1 ☒ B1 ☒ C1
☐ A2 ☐ B2 ☐ C2
☐ A3 ☐ B3 ☐ C3
☐ A4 ☐ B4
☐ A5 ☐ B5
☐ A6 ☐ B6
I tried to add some CSS functions in the labelStyle functions (float, width) but none of them work. 我试图在labelStyle函数(float,width)中添加一些CSS函数,但是它们都不起作用。
Am I doing this the right way? 我这样做正确吗? What should I do? 我该怎么办?
The one way we can achieve this could be as follows, 我们可以实现这一目标的一种方法如下:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div(
style={'width':'5%', 'height':'100%','float':'left'},
children=[
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'A1', 'value': 'I1ST1'},
{'label': 'A2', 'value': 'I2ST1'},
{'label': 'A3', 'value': 'I3ST1'},
{'label': 'A4', 'value': 'I4ST1'},
{'label': 'A5', 'value': 'I5ST1'},
{'label': 'A6', 'value': 'I6ST1'}
],
values=['I1ST1'],
labelStyle = {'display': 'block'}
),
]
),
html.Div(
style={'width':'5%', 'height':'100%','float':'left'},
children=[
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'B1', 'value': 'I1ST2'},
{'label': 'B2', 'value': 'I2ST2'},
{'label': 'B3', 'value': 'I3ST2'},
{'label': 'B4', 'value': 'I4ST2'},
{'label': 'B5', 'value': 'I5ST2'},
{'label': 'B6', 'value': 'I6ST2'}
],
values=['I1ST2'],
labelStyle = {'display': 'block'}
)
]
),
html.Div(
style={'width':'5%', 'height':'100%','float':'left'},
children=[
dcc.Checklist(className ='checkbox_1',
options=[
{'label': 'C1', 'value': 'I1MT'},
{'label': 'C2', 'value': 'I2MT'},
{'label': 'C3', 'value': 'I3MT'}
],
values=['I1MT'],
labelStyle = {'display': 'block'}
)
]
)
])
if __name__ == '__main__':
app.run_server(debug=True)
We can style each of the dash components with the style
option, using which we can customize the layout. 我们可以使用style
选项为每个破折号组件设置style
,使用它们可以自定义布局。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.