diff --git a/demo/src/components/MyTour.vue b/demo/src/components/MyTour.vue index baa4596..f1342d8 100644 --- a/demo/src/components/MyTour.vue +++ b/demo/src/components/MyTour.vue @@ -43,6 +43,9 @@ export default { }, { target: '#v-step-1', + header: { + title: 'Vue Tour' + }, content: 'An awesome plugin made with Vue.js!' }, { diff --git a/src/components/VStep.vue b/src/components/VStep.vue index 5963f38..fb18dc4 100644 --- a/src/components/VStep.vue +++ b/src/components/VStep.vue @@ -1,9 +1,15 @@ @@ -58,7 +64,7 @@ export default { ...DEFAULT_STEP_OPTIONS, ...this.step.params } - } + } }, mounted () { let targetElement = document.querySelector(this.step.target) @@ -104,6 +110,10 @@ export default { .v-step .v-step__arrow { border-color: #50596c; /* #ffc107, #35495e */ + + &--dark { + border-color: #454d5d; + } } .v-step[x-placement^="top"] { @@ -168,6 +178,14 @@ export default { /* Custom */ + .v-step__header { + margin: -1rem -1rem 0.5rem; + padding: 0.5rem; + background-color: #454d5d; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .v-step__content { margin: 0 0 1rem 0; }