将 dash 应用程序布局输入框与下拉列表和日期对齐

Question

我正在尝试使用 DASH 应用程序创建布局，但我不确定为什么当我尝试使用下拉菜单设置输入框时它不起作用。

这是我的布局：

tab_1_layout = html.Div([
dcc.Input(id="ad_account_id", type="text", placeholder="Account ID", style={'width': '200px',
                                                                            'margin-top': 10,
                                                                            'margin-left': 20,

                                                                            }),
# html.Br(),
dcc.Input(id="app_id", type="text", placeholder="App ID", style={'width': '200px',
                                                                 'margin-left': 20,
                                                                 'display': 'inline-block'
                                                                 }),
# html.Br(),
dcc.Input(id="access_token", type="text", placeholder="Access Token", style={'width': '200px',
                                                                             'margin-left': 20,
                                                                             'display': 'inline-block'
                                                                             }),
# html.Br(),
dcc.Input(id="app_secret", type="text", placeholder="App Secret", style={'width': '200px',
                                                                         'margin-left': 20,
                                                                         }),

# html.Br(),
dcc.Dropdown(
    id='dimensions',
    options=[{'label': i, 'value': i} for i in ['Campaign', 'Placement', 'Creative']],
    multi=True,
    placeholder='Dimensions',
    style={'width': '200px', 'margin-left': 150, 'margin-top': 20, 'display':'inline-block'}
),
# html.Br(),
dcc.Dropdown(
    id='metrics',
    options=[{'label': i, 'value': i} for i in ['Impressions', 'Clicks', 'Conversions']],
    multi=True,
    placeholder='Metrics',
    style={'width': '200px', 'margin-left': 400}
),
html.Br(),
dcc.DatePickerSingle(
    id='start-date',
    placeholder="Start Date",
    min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
    max_date_allowed=datetime.datetime.today().date(),
    display_format='YYYY-MM-DD',
    style={'width': '200px', 'margin-top': 10, 'margin-left': 400}
),
# html.Br(),
dcc.DatePickerSingle(
    id='end-date',
    placeholder="End Date",
    min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
    max_date_allowed=datetime.datetime.today().date(),
    display_format='YYYY-MM-DD',
    style={'width': '200px', 'margin-top': 10, 'margin-left': 220}
),
html.Br(),
html.Button(id='submit-button', type='submit', children='Submit', style={'width': '200px', 'margin-top': 10,
                                                                         'margin-left': 10}),
html.Div(id='output_div')]),

显示 UI 如下所示，但我想将维度和指标与第一行对齐，然后在第二行对齐开始日期和结束日期，然后提交第三行。

Answer 1

有很多方法可以实现这一点，但我个人喜欢 Dash Bootstrap 布局。下面是您重构的代码，使用 bootstrap 行和列来实现您想要的。 Bootstrap layout

import datetime
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html

import numpy as np

app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.title = "Steepest Descent"

server = app.server

row1 = html.Div(
    [
        dbc.Row([
            dbc.Col([
                dbc.Input(id="ad_account_id", 
                          type="text", 
                          placeholder="Account ID",
                          style={'width': '150px'}),
            ], width={"order": "first"}),

            dbc.Col([
                dbc.Input(id="app_id", 
                          type="text", 
                          placeholder="App ID",
                          style={'width': '150px'}),
            ]),
            dbc.Col([
                dbc.Input(id="access_token", 
                          type="text",
                          style={'width': '150px'},
                          placeholder="Access Token")
            ]),
            dbc.Col([
                dbc.Input(id="app_secret", 
                          type="text", 
                          style={'width': '150px'},
                          placeholder="App Secret")
            ]),

            dbc.Col([
                dcc.Dropdown(
                    id='dimensions',
                    options=[{'label': i, 'value': i} for i in ['Campaign', 'Placement', 'Creative']],
                    multi=True,
                    style={'width': '150px'},
                    placeholder='Dimensions')
            ]),
            dbc.Col([
                dcc.Dropdown(
                    id='metrics',
                    options=[{'label': i, 'value': i} for i in ['Impressions', 'Clicks', 'Conversions']],
                    multi=True,
                    style={'width': '150px'},
                    placeholder='Metrics')
            ])
        ], align="center"),
    ]
)

row2 = html.Div([
     dbc.Row([
         dbc.Col([
            dcc.DatePickerSingle(
                id='start-date',
                placeholder="Start Date",
                min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
                max_date_allowed=datetime.datetime.today().date(),
                display_format='YYYY-MM-DD',
                style={'width': '150px'}
            ),
        ], width={"order": "first"}),
        dbc.Col([
            # html.Br(),
            dcc.DatePickerSingle(
                id='end-date',
                placeholder="End Date",
                min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
                max_date_allowed=datetime.datetime.today().date(),
                display_format='YYYY-MM-DD',
                style={'width': '150px'}
            )], align="center"),
        ])
     ])

row3 = html.Div([
    dbc.Row([
         dbc.Col([
             html.Button(id='submit-button', type='submit', children='Submit', style={'width': '200px', 'margin-top': 10,
                                                                                                 'margin-left': 10}),

             ], width={"order": "first"}),
         dbc.Col([
             html.Div(id='output_div'),
             ])
         ])
    ])

app.layout = dbc.Container(children=[
                               row1,
                               html.Br(),
                               row2,
                               html.Br(),
                               row3]
                           )

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

将 dash 应用程序布局输入框与下拉列表和日期对齐

Align the dash app layout input box with drop down and dates

python

python-3.x

plotly-dash