Grid Layout

문제

아래 처럼 2단으로 구성해 보자

 

코드

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

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

app.layout = html.Div([
    html.H1('Country City Dashboard'),

    dbc.Row([
        dbc.Col(
            html.P(['Naver: ', html.A('Naver', href='https://www.naver.com', target='_blank')]),
            width=4
        ),
        dbc.Col(
            [
                html.Label('Korea City: '),
                dcc.Dropdown(
                    options=['Seoul', 'Pusan', 'Kwangju'],
                    value='Seoul'
                )
            ],
            width=8
        )
    ])
])

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

 

설명

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

 

참고: https://www.udemy.com/course/python-interactive-dashboards-with-plotly-dash