Help with Vertical Tabs

#1

Hello @etardiff,
having recently discovered this post and your answer regarding vertical tabs, adding class="tc-vertical" to any <<tabs>> macro I need some help.

Your excellent Demo Gardening Wiki explains the use of Tabs, but I’m not sure how to add the class="tc-vertical" to your examples.

Could you please suggest how I can use Vertical Tabs in my own templates.

#2

Hi Sunny!

@etardiff will surely have more info for you, but in the meantime:

The view template that displays tabs, in that gardening wiki is this one:

Adding the class="tc-vertical" to that tiddler makes it look like this:

<% if [<currentTiddler>tag[Plant]] %>

<$macrocall $name="tabs"
	tabsList={{PlantTabs}}
	default={{{ [enlist{PlantTabs}] }}}
	template="PlantTabTemplate"
    class="tc-vertical"
/>

<% endif %>

And the result looks like this:

image
image1328×764 61.4 KB

#3

Perfect answer — thank you, @Springer! All I can add is that when you’re supplying parameters to a macro or procedure, the format needed will depend on the form of macrocall you used.

  • You may be more familiar with the short-form, which looks like <<tabs>> or <<list-links-draggable>>. In this format, parameters take the form parameter:"value" — so in this case, it would be <<tabs class:"tc-vertical">>. Note the colon (:) used between the parameter name and the quoted value!
  • In complicated templates, I often use the long-form format <$macrocall $name="tabs" ... />, which allows me to use dynamically generated values (like default={{{ [enlist{PlantTabs}] }}} ), which are impossible with the short form <<tabs>>. In this case, you need an equals sign (=) between the parameter and the value.

Let me know if you have further questions. :slight_smile:

1 Like
#4

Thank you @Springer.
It is so obvious now that you’ve shown me

<$macrocall $name=“tabs”

I couldn’t see what was right there in front of me.

Regarding the

[tag[Plant]]

Can this be changed to include more tags such as herbs vegetables

#5

Hello @etardiff,
thank you for reply and explanation.
Your demo was very helpful.

#6

Try this:

<% if [<currentTiddler>tag[Plant]] [<currentTiddler>tag[herbs]] [<currentTiddler>tag[vegetables]] %>

Notes:

  • The filter contains three separate “filter runs”, each of which tests to see if the current tiddler is tagged with a specified tag value.
  • If a tiddler has more than one matching tag value (i.e., “Plant” and “herbs”), it will only be listed once in the result, because filters generally use “dominant append” handling, which automatically “de-duplicates” entries.

-e

#7

Thank you @EricShulman
Another excellent reply and explanation.

1 Like
#8

And if you’re including a number of tags (thus, a number of filter runs), you may prefer the slightly shorter equivalent

<% if [{!!title}tag[Plant]] [{!!title}tag[herbs]] [{!!title}tag[vegetables]] %>

Alternately, if all your tags are single words (no white-space!) you can do this with a search instead:

<% if [{!!title}search:tags:some[Plant herbs vegetables]] %>
  • By default, the search operator will treat its parameter Plant herbs vegetables as three separate strings (separated by whitespace) which must all be found in the tags field. If all three of these words are found somewhere in the tags, the filter will return the title of the current tiddler.
  • By adding the flag :some, we can change search's behavior so it will return the title of the current tiddler if any of the listed words are found in the tags.
  • search is case-insensitive by default, but you can specify search:tags:some,casesensitive if you don’t want to consider “Herbs” a match for “herbs”.
  • Note that search does not care about word boundaries, just about strings of characters — so [{!!title}search:tags:some[Plant herbs vegetables]] will match if the current tiddler has the tag “plantation” but none of the tags “Plant”, “herbs”, or “vegetables”. If this kind of “fuzzy” match doesn’t work for your use-case, search won’t work for you here.
1 Like
#9

Hi @etardiff
Every day is a school day.

Thanks again to you all @Springer, @EricShulman , @etardiff

I will now mark @Springer’s first post as the solution but everyone has solved my questions and shown how much there is to learn about TW.

2 Likes