【问题标题】:Adding buttons with external links to plotly dash modal将带有外部链接的按钮添加到绘图破折号模式
【发布时间】:2021-01-14 06:48:15
【问题描述】:

dash 的新手,试图弄清楚如何创建一个在其中有自己的按钮的模式(弹出窗口)。我已经阅读了 dbc 文档,他们似乎没有讨论如何在链接到其他地方的模式中添加内容inside。理想情况下,此模式将有一条消息,但也有一个链接到 jira 的按钮。我在想这样的事情:

import dash_html_components as html
from dash.dependencies import Input, Output, State

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"
                   )
               ),
           ],
           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

外部链接按钮将在您的浏览器中打开一个新选项卡并导航到另一个网站,但我不确定。非常感谢任何帮助和建议,谢谢!

【问题讨论】:

  • 它不工作吗?您是否收到错误消息?不确定具体是什么问题。
  • @coralvanda 是的,它不工作,我不确定将外部链接放在哪里

标签: python plotly dashboard plotly-dash


【解决方案1】:

This is the page you need 来自文档。只需将href 属性添加到您的按钮。所以你会有类似的东西:

dbc.Button(
    "External Link",
    id="link-centered", 
    className="ml-auto",
    href='https://en.wikipedia.org/wiki/Main_Page'
)

【讨论】:

  • 嗨,有什么方法可以从回调中获取链接吗?
  • 您想使用回调更新链接吗?我认为您可以将href 用作回调的输出目标。
  • 没错,但由于某种原因,它既没有采用默认网址,也没有采用新链接。一个小代码 sn-p 可以帮助我这是我的回调@app.callback(dash.dependencies.Output('link-centered', 'href'), [dash.dependencies.Input('out_link', 'value ')]) def open_url(link): ctx = dash.callback_context if not ctx.triggered: button_id = 'No clicks yet' else: button_id = ctx.triggered[0]['prop_id'].split('.') [0] if (button_id == 'link-centered'): return link -> Link has a valid url
  • 我终于可以正常工作了,回调位置错误。更正了。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-11-03
  • 2021-03-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-11
  • 1970-01-01
相关资源
最近更新 更多