Как разделить контрольный список Python Dash на несколько столбцов? - PullRequest
Новая
       2

Как разделить контрольный список Python Dash на несколько столбцов?

0 голосов
/ 02 июля 2019

Я новичок в Dash и никогда не программировал на html, поэтому я не уверен, как все это работает.

Я пытался разделить контрольный список на несколько столбцов.

Вот часть моего кода: 

        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'}
                                )
                    )       
                ]
            )

У меня сейчас есть что-то вроде этого: 

☒ A1
☐ A2
☐ A3
☐ A4
☐ A5
☐ A6
☒ B1
☐ B2
☐ B3
☐ B4
☐ B5
☐ B6
☒ C1
☐ C2
☐ C3

То, что я хочу, выглядит так: 

☒ A1   ☒ B1   ☒ C1
☐ A2   ☐ B2   ☐ C2
☐ A3   ☐ B3   ☐ C3
☐ A4   ☐ B4
☐ A5   ☐ B5
☐ A6   ☐ B6

Я пытался добавить некоторые функции CSS в функции labelStyle (float, width), но ни одна из них не работает.

Я делаю это правильно? Что мне делать?

1 Ответ

0 голосов
/ 02 июля 2019

Единственный способ добиться этого может быть следующим: 

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)

Мы можем стилизовать каждый из компонентов тире с помощью опции style, используя которую мы можем настроить макет.

...