Dash bootstrap 如何拆分应用布局

Question

我在实现下图中的布局时遇到了一些问题。剩下的就是添加我在蓝色中包含的那 3 个图表。

到目前为止，我已将所有内容包含在 1 行中，用完了所有 12 列：

第 1 栏：带有下拉菜单和清单 → 宽度 = 2 Col 2 → 12：所有 cards/boxes 在上面。现在，如果我移动以创建一个新行，我将使图表位于左侧部分的下方（因此中间会有这个巨大的空白）。

根据用户的选择，第 1 列的大小可以变大或变小。我想让它独立，这意味着无论它的大小如何，我都希望所有其余部分都像我在此处的图像上显示的那样显示。

我的简化代码：

layout = dbc.Container([
dbc.Row([
    dbc.Col([
        dbc.Card([
            dbc.CardHeader('Portfolio Summary', style={'font-size': 20, 'textAlign': 'center', 'background-color': '#006398', 'color': 'white', 'font-weight': 'bold'}),
            html.Label('Region:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.RadioItems(id='region_radio',
                           options=[{'label': str(c), 'value': c} for c in sorted(df['Region'].unique())],
                           labelStyle={'display': 'block'},
                           inputStyle={'margin-right': '5px'},
                           style={'margin-left': '10px', 'margin-top': '0px', 'font-size': 15, 'color': 'white'}),
            html.Label('Country:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='country_checklist', className='checkbox',
                          value=[],
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                         ),
            html.Label('City:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='city_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                         ),
            html.Label('Property Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='property_type_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          options=[{'label': str(c), 'value': c} for c in sorted(df['Building Type'].unique())],
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                          ),
            html.Label('Ownership Type:', style={'margin-left': '10px', 'font-size': 18, 'color': 'white', 'font-weight': 'bold'}),
            dcc.Checklist(id='ownership_type_checklist', className='checkbox',
                          labelStyle={'display': 'block'},
                          inputStyle={'margin-right': '5px'},
                          options=[{'label': str(c), 'value': c} for c in sorted(df['Ownership Type'].unique())],
                          style={'margin-left': '10px', 'font-size': 15, 'color': 'white'}
                          ),
            dbc.Button("Submit", id='submit_button', color="light", className="d-grid gap-2 col-6 mx-auto"),
            dbc.Button("Clear All", color="dark", className="d-grid gap-2 col-6 mx-auto", href='/'),
        ], style={'margin-left': '-10px', 'background-color': '#006398'})
    ], width=2),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Countries', className='card-title'),
                    html.P(id='country_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-globe', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ],style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Cities', className='card-title'),
                    html.P(id='city_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-city', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Properties', className='card-title'),
                    html.P(id='property_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-building', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Annual Rent', className='card-title'),
                    html.P(id='rent_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-coins', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=2),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Total Area', className='card-title'),
                    html.P(id='area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-expand', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Rent/Area', className='card-title'),
                    html.P(id='rent_area_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-money-bill', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Headcount', className='card-title'),
                    html.P(id='headcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-user', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Deskcount', className='card-title'),
                    html.P(id='deskcount_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-couch', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),

    dbc.Col([
        dbc.CardGroup([
            dbc.Card(
                dbc.CardBody([
                    html.H6('Cost/Person', className='card-title'),
                    html.P(id='cost_person_card', className='card-text', style={'font-size': 30, 'font-weight': 'bold', 'text-align': 'right'})
                ])
            ),
            dbc.Card(
                html.Div(className='fa fa-user-tag', style=card_icon),
                className='bg-secondary',
                style={'maxWidth': 55}
            )], className='mt-4 shadow')
    ], style={'margin-top': '-23px'}, width=1),
]),

], 流体=真)

Answer 1

您可以嵌套 rows/cols 以获得您请求的布局。

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

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

graph = dcc.Graph(figure={
    'data': [
        {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
    ],
    'layout': {
        'title': 'Dash Data Visualization',
    },
}, responsive=True, className="h-100")

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div("stuff", className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")], width=4)
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ]),
        ], width=5),
        dbc.Col([
            dbc.Row([
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
                dbc.Col([html.Div("header", className="bg-primary")]),
            ]),
            dbc.Row([
                dbc.Col([graph]),
            ], className="h-100"),
        ], width=5),
    ])
], fluid=True)

app.run_server(debug=True)

Dash bootstrap 如何拆分应用布局

Dash bootstrap how to split the app layout

python

layout

plotly

plotly-dash