Possible to keep multiple tabs in sync?
Opened this issue · 6 comments
So for my documentation site I have something like this:
:::: tabs :options="{ useUrlFragment: false }"
::: tab PHP
// Some code
:::
::: tab Javascript
// Some code
:::
::::
And then on another page I have the same setup. Is it possible that when I click on, for example, javascript that that decision would retain on each page? So that on each page the javascript tab is active?
That's a feature I would appreciate as well, but it would probably be better to implement it in vue-tabs-component
, which has been abandoned.
For tabs in the same page it can be done by not disabling the url fragments and not deduplicating the ids. It works because tabs have the same id (not a good practice).
With the current component I don't think there is an alternative way to achieve this functionality.
@pskordilakis It does indeed work for the same page. However when useUrlFragment
is set to true
the page jumps to the element, which I don't want. Is there an option to not jump to the element?
I am not sure how to avoid the jump to the element. When useUrlFragment is set to true it creates anchors (#) and the behaviour of the browser is to jump to the element.
I too would find this useful
example: select your favourite programming language, then all snippets on the page update: https://firebase.google.com/docs/firestore/query-data/queries (seems the choice is sticky across page loads in their case (cookie or localstorage?), but a url fragment that doesn't have to be duplicated in the markup would be a nice start)
@pskordilakis @GijsGoudzwaard It's possible to prevent the jump with some code like this:
<script>
export default {
mounted () {
this.$nextTick(() => {
document.querySelectorAll(".tabs-component-tab a").forEach(el => {
el.addEventListener("click", e => {
e.preventDefault()
history.pushState(null, null, el.href)
})
})
})
}
}
</script>