Hi community, I have been using dash for quite some time (almost from the beginning). I really like the frame work and this weekend I decided to create my own component. Less complicated than I thought and the docs describe the steps really well. I ported reacttour , which will allow you to create y…

Looks very nice, thanks for sharing! I’ll try it out for sure.

To my knowledge, at the moment Dash only allows you to pass other components via the children property, i.e. you can’t pass html.Div() as part of the steps property. Similarly, you can’t pass function handles. Instead, you’ll have to pass something else (e.g. a string), which is then mapped into a …

Thansk @Emil to clear this up. I will have a look on how you made dash-leaflet work, nice solution! Either there must be some way to translate it to react? Maybe @chriddyp knows of a workaround/solution?

Thanks! The only kind-of-work-around that i know of is to pass object via the children property, as noted in this thread, [image] Custom component: Passing Dash components as html? Dash Python Unfortunately it’s not available by default. However, components get serialize…

when I click my_second_step, this component shows up in the middle of screen. can you tell me how to keep this component on the top of screen? Thanks

hi @hspierre , In my example the first step has the value '[id="my_first_step"]' for the selector key. The id has to correspond with an id in your layout. When this step is activated the modal (or pop up) will move to this location. If it can not find the id it will pop in the middle of the screen. …

I updated the component -> git link Most of the props are now available! [ezgif.com-crop]

Hi, many thanks for this super useful component ! It is great to boost app onboarding. Do you know if it is possible to use formatting to the content modals ? I have tried using html tags inside the text, using a html.Div or a dcc.Markdown to the content prop but it throws an error.

Did you ever get an answer to this? Running into the issue myself. It’s such a great component, but I need to add some newlines.

I found that creating a custom css class with white-space: pre-line; works

Dash Tour Component

Dash Python

AnnMarieW August 20, 2024, 4:42pm 14

Hi @menamine and welcome to the Dash community

You could give Yada a try:

2 Likes

Topic		Replies	Views
Using dash - create component Dash Python	2	370	May 12, 2020
Introducing Dash Yada (Your Automated Dashboard Assistant) Dash Python	7	1360	September 1, 2024
Custom component: Passing Dash components as html? Dash Python	35	3076	December 8, 2022
Pass Dash Component to custom React Component Dash Python	0	411	September 25, 2019
Converting React.js components to Dash compatible components Dash Python	4	6632	February 14, 2018

Dash Tour Component

Related topics