Tour
Product tour with spotlight highlights and step navigation.
Preview
Renders nothing until started — it draws over the page's own elements.
The tour requires host-page anchors and a current step, so it has no standalone preview.
Usage
views.py
python
from djust import LiveView
from djust.decorators import event_handler
from djust.components import Tour
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = Tour()
@event_handler()
def tour(self, value=None, **kwargs):
pass # your app acts on 'tour'; no component state movesmy_template.html
django
{{ component }}Events this component sends to the view: tour.
Needs its script on the page: <script src="{% static 'djust_components/tour.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| steps | list | None | None | list of step dicts with target, title, content |
| active | int | 0 | index of current step (default 0) |
| event | str — renames the event; identity is `name` | 'tour' | djust event the Back / Next / Skip / Finish buttons send, with ``value`` ``"prev"`` / ``"next"`` / ``"skip"`` / ``"finish"`` |
| show_progress | bool | True | show step progress indicator (default True) |
| show_skip | bool | True | show skip button (default True) |
| custom_class | str | '' | additional CSS classes |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.tour | Subclass it, or pass custom_class, to change how it renders. |