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 your own tour trough your web app.
Note that this is the first time that I programmed in React, and this is thirst time I published anything to the open-source community. The port I made is very simple and does not include all the features yet. However in the upcoming weeks I will update the project and make it more complete.
In the mean time you can download it through pip: pip install dash-tour-component and run the demo
import dash_tour_component
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dash_tour_component.DashTour(
steps=[
{
'selector': '[id="my_first_step"]',
'content': "This is my first step",
# 'position': "center"
},
{
'selector': '[id="my_second_step"]',
'content': 'This is my second Step',
}
],
isOpen=False,
id="tour_component"
),
html.Button("Open Tour", id='open_tour_button'),
html.Div("Test 1", id='my_first_step', style={'text-align': 'center'}),
html.Div(style={'height': '400px'}),
html.Div("Test 2", id='my_second_step', style={'text-align': 'center'})
])
@app.callback(
Output('tour_component', 'isOpen'),
[Input('open_tour_button', 'n_clicks')],
prevent_initial_call=True
)
def open_tour_component(value):
return True
if __name__ == '__main__':
app.run_server(debug=True)
Non the less I need the help with the following:
In the steps you pass the content to the tour component. I tried to pass for example a html.Div() instead of a string. As soon as I run the app I get the error that is not a valid argument. I tried several things which did not work. If someone could point me in the correct direction that would be great!
Note, this is how I programmed/defined the steps:
/**
* The steps in the tour component
*/
steps: PropTypes.arrayOf(PropTypes.shape({
'selector': PropTypes.string,
'content': PropTypes.oneOfType([
PropTypes.node,
PropTypes.element,
PropTypes.func,
]).isRequired,
'position':PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.number),
PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),
]),
'action': PropTypes.func,
'style': PropTypes.object,
'stepInteraction': PropTypes.bool,
'navDotAriaLabel': PropTypes.string,
})),
Second, is it also possible to pass a function? For example the action needs to be a function, would be awesome if it was possible to pass a python function to update a component!
