Dash Modal语法错误-dbc有问题

Question

我有以下代码，我正试图在本地服务器中作为python dash运行。我希望在关闭按钮旁边有一个包含JIRA链接的按钮。我还是Dash的新手，所以我不确定我的语法错误在哪里。欢迎任何建议，非常感谢。我收到的错误是行文件"；app.py"；，第27行dbc。按钮("外部链接"，id="链接居中"(，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)

Answer 1

这段代码应该适用于您(请注意，您没有在布局中定位modal(：

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)