Py.Cafe

maartenbreddels/

solara-vue-tour-demo

vue-tour demo

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import solara
from typing import Callable

# using https://github.com/widgetti/ipyvuetify/issues/182
# based on https://github.com/pulsardev/vue-tour
# and https://py.cafe/maartenbreddels/solara-howto-component-vue-B

steps = [
    {
        "target": '.v-step-0',  # We're using document.querySelector() under the hood
        "header": {
            "title": 'Get Started',
        },
        "content": "Discover <strong>Vue Tour</strong>!"
    },
    {
        "target": '.v-step-1',
        "content": 'An awesome plugin made with Vue.js!'
    },
    {
        "target": '.v-step-2',
        "content": 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
        "params": {
            "placement": 'top' #Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements
        }
    }
]
@solara.component_vue("tour.vue")
def Tour(steps):
    ...

@solara.component
def Page():
   Tour(steps=steps)
   solara.Button("Button 1", classes=["v-step-0"])
   with solara.Card("title", classes=["v-step-1"]):
        solara.Button("Button 2", classes=["v-step-2"])
tour.vue
1
Could not load content