python - Dash Modal 语法错误 - dbc 有问题？

Question

我有以下代码，我试图在本地服务器中作为 python dash 运行。我希望在关闭按钮旁边有一个包含 JIRA 链接的按钮。我还是 Dash 的新手，所以我不确定我的语法错误在哪里。欢迎任何建议，非常感谢。我收到的错误是针对行 File "app.py", line 27 dbc.Button("External Link",id="link-centered"),className="ml-auto",href='https:// JIRA.com”。是不是把它扔掉的href？我缺少某种语法格式吗？

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


#####start of modal stuff###
modal = html.Div(
[
    dbc.Button("Open",id="open-centered"),
    dbc.Modal(
        [
            dbc.ModalHeader("Request"),
            dbc.ModalBody("Click the link below to be directed to your request"),
            dbc.ModalFooter(
                dbc.Button("Close", id="close-centered"),className="ml-auto"
                dbc.Button("External Link",id="link-centered"),className="ml-auto",href='https://JIRA.com'
                )
        ],
        id="modal-centered",
        centered=True,
    ),
]
)

@app.callback(
Output("modal-centered", "is-open"),
[Input("open-centered", "n_clicks"), Input("close-centered", "n_clicks")],
[State("modal-centered", "is-open")],
)

def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open
###### end of modal stuff #####

app.layout = html.Div([
    html.Label('Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF'],
        multi=True
    ),

    html.Label('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF']
    ),

    html.Label('Text Input'),
    dcc.Input(value='MTL', type='text'),

    html.Label('Slider'),
    dcc.Slider(
        min=0,
        max=9,
        marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
        value=5,
    ),
], style={'columnCount': 2})

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

标签： pythondashboardplotly-dash

Answer 1

此代码应该适合您（请注意您没有在布局中找到模式）：

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions'] = True

#####start of modal stuff###
modal = html.Div(
    [
        dbc.Button("Open",id="open-centered"),
        dbc.Modal(
            [
                dbc.ModalHeader("Request"),
                dbc.ModalBody("Click the link below to be directed to your request"),
                dbc.ModalFooter(
                    [
                        dbc.Button("Close", id="close-centered",className="ml-auto"),
                        html.A(
                            dbc.Button("External Link",id="link-centered",className="ml-auto"),
                            href='https://JIRA.com'
                        )
                    ]
                )
            ],
            id="modal-centered",
            centered=True,
        ),
    ]
)

@app.callback(
Output("modal-centered", "is_open"),
[Input("open-centered", "n_clicks"), Input("close-centered", "n_clicks")],
[State("modal-centered", "is_open")],
)

def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open
###### end of modal stuff #####

app.layout = html.Div([
    html.Label('Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF'],
        multi=True
    ),

    html.Label('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF']
    ),

    html.Label('Text Input'),
    dcc.Input(value='MTL', type='text'),

    html.Label('Slider'),
    dcc.Slider(
        min=0,
        max=9,
        marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
        value=5,
    ),
    modal
], style={'columnCount': 2})

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