Tabs inside pages

As a developer I use different programming language to write code. It will be very helpful to have query that will put multiple pages/blocks in tabs

Tiddlywiki provide that feature using

<<tabs "SampleTabOne SampleTabTwo SampleTabThree SampleTabFour" "SampleTabOne" "$:/state/tab1">>

Does anyone know how to add tabs on pages ? ( like query on properties adds table view )

1 Like

This got me interested and I started to play around trying to find a css only solution. Unfortunately however, to no success. The concept I’ve been playing with would be quite easy to implement if we could use the :has pseudo-selector.

Anyways, it would look something like this:

div[data-refs-self*="p-tab-view"] .block-children .ls-block {
  display: none;
}

div[data-refs-self*="p-tab-view"]:has(input[value="1"]:checked) .block-children .ls-block:nth-of-type(1) {
  display: block;
}

div[data-refs-self*="p-tab-view"]:has(input[value="2"]:checked) .block-children .ls-block:nth-of-type(2) {
  display: block;
}

...

And the markdown like this:

- #p-tab-vieXX
  [:span [:input {:type "radio" :name "ptv" :id "1" :value "1"} [:label {:for "1"} " First Tab "]] [:input {:type "radio" :id "2" :name "ptv"  :value "2"} [:label {:for "2"} " Second Tab "]] [:input {:type "radio" :id "3" :name "ptv"  :value "3"} [:label {:for "3"} " Third Tab "]] ]

Which does not work as intended, of course.

image

Trying to inject a data-ref will also not be picked up by the parent block, e.g. when replacing the “First Tab” label text with the following: [:a {:tabindex "0" :data-ref "ptv1" :class "tag"} "First Tab"]

Unless someone knows how to emulate a css parent selector, you’ll have to whip up some javascript :person_shrugging:

@devs Why is the :has pseudo-selector not available?

1 Like

Thanks for reply. But may be it can be solved using {{ query }} , But implementation need to done for it . I have very less knowledge on js/cljs . Anyone from community might help