Created
June 23, 2022 23:58
-
-
Save AnnMarieW/b5269c177cc3dfed06766aded802f664 to your computer and use it in GitHub Desktop.
Dash: Use dcc.Link in a dcc.Markdown component for high performance links that don't refresh the page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from dash import Dash, html, dcc | |
app = Dash(__name__) | |
app.layout = html.Div( | |
[ | |
html.Div(["Regular Markdown link - note that the page refreshes"]), | |
dcc.Markdown(["[Page 1](page1)"]), | |
html.Br(), | |
html.Div(["Markdown dccLink - note that the pages does not refresh"]), | |
dcc.Markdown( | |
['<dccLink href="/page2" children="Page 2" />'], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div(["Markdown dccLink - explicit children"]), | |
dcc.Markdown( | |
[ | |
""" | |
<dccLink href="page3"> | |
Page 3 | |
</dccLink> | |
""" | |
], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div("Markdown dccLink = inlined"), | |
dcc.Markdown( | |
[ | |
'This is an inlined <dccLink href="/page4" children="Page 4" /> with text on both sides' | |
], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div("Markdown dccLink - nested image -click on image"), | |
dcc.Markdown( | |
[ | |
""" | |
<dccLink href="/page5"> | |
<img src="assets/image.png" /> | |
</dccLink> | |
""" | |
], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div( | |
"Markdown dccLink - nested markdown - title is formatted with markdown syntax" | |
), | |
dcc.Markdown( | |
[ | |
""" | |
<dccLink href="/page6"> | |
<dccMarkdown children="## Page 6" /> | |
</dccLink> | |
""" | |
], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div("Markdown dccLink - nested markdown image"), | |
dcc.Markdown( | |
[ | |
""" | |
<dccLink href="page7"> | |
<dccMarkdown children="" /> | |
</dccLink> | |
""" | |
], | |
dangerously_allow_html=True, | |
), | |
html.Br(), | |
html.Div( | |
"Markdown dccLink - requires dangerously_allow_html - this link is not visible" | |
), | |
dcc.Markdown(['<dccLink href="page8" children="Title" />']), | |
] | |
) | |
if __name__ == "__main__": | |
app.run_server(debug=True) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment