Блог

Я пытаюсь упорядочить свою панель инструментов Plotly Dash по разделам столбцов, но я не могу понять, что я здесь делаю не так. Я включил свои компоненты в отдельный dbc.Колы в пределах одного dbc.Постройте и укажите ширину столбца, который я хотел бы, чтобы они заняли, но все просто сложено. В идеале, у меня были бы карты в колонке сами по себе слева, а затем у меня были бы вопросы рядом с ними справа. Может ли кто-нибудь, пожалуйста, помочь мне диагностировать то, что я делаю, из-за чего все мои компоненты стекаются?

 #Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State



app = dash.Dash()

#App Layout
app.layout = html.Div([
    dbc.Row(children=[
                dbc.Col(id="card_col",width = 6),
                dbc.Col(id="form", width=6, children=[
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Question 1"),
                            dbc.Col(
                                dcc.Input(type="text", id="q1", placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div(children=[
                        dbc.FormGroup(children=[
                            dbc.Label("Question 2?"),
                            dbc.Col(
                                dbc.Input(type="text",id="q2",placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Yes/No?"),
                            dbc.Col(
                                dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": 1},
                                                                {"label": "No", "value": 2}
                                                               ]
                                              ),width=6
                            )
                        ],row=True)

                    ]),
                    html.Br(),
                    html.Div([
                        html.Button(id='submit-button',
                            n_clicks=0,
                            children='Submit Query',
                            style={'fontSize':24})

                    ])

                ]) #End of second column
                ]), #End of row,
    dbc.Row(
        html.Div([
            dcc.Graph(id='graph1')
        ])
    
    )
    

])


@app.callback(
    Output('card_col','children'),
    Input('submit-button','n_clicks'),
    State('q1','value'),
    State('q2','value'),
    State('q3','value'))
def update_cards(n_clicks,input1,input2,input3):
    
    card1 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input1}", className="card-title"),
            html.P(f"{input1} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
        
    card2 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input2}", className="card-title"),
            html.P(f"{input2} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
    
    card3 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input3}", className="card-title"),
            html.P(f"{input3} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])    
        
    return (card1, card2, card3)
    

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

Вы не включили стили начальной загрузки:

Связывание компонентов таблицы стилей dash-bootstrap-не входит в комплект CSS. Это дает вам свободу использовать любую таблицу стилей начальной загрузки v4 по вашему выбору. Это означает, однако, что для того, чтобы компоненты были оформлены должным образом, вы должны сами подключиться к таблице стилей.

В Python каждая ссылка CDN доступна в подмодуле dbc.themes и может использоваться при создании экземпляра объекта приложения.

https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/

Так что вместо этого:

 app = dash.Dash()
 

сделай это:

 app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])