Button Reveal formatting

#1

I have a python job creating the input for a single tiddler from numerous analyzed logs and I am using the button widget and reveal widget to generate something similar to the tabs macro since I only have a single large tiddler. example tiddler: Flux Capacity — WVW Log Review

The button menu work, hover effect in place. However I can’t determine how to impart a selected effect on the button clicked.

Is there a way to highlight the appropriate button based on the curTab field of the tiddler? I thought selectedClass attribute would do it but either I am incapable or it only works when using a state tiddler.

example button/reveal

<$button set="!!curTab" setTo="Overview" selectedClass="" class="btn btn-sm btn-dark" style=""> Session Overview </$button>

<$reveal type="match" state="!!curTab" text="Overview">
some stuff....
</$reveal>
#2

Often we can get inspiration from tiddlywiki itself. For example the tabs macro $:/core/macros/tabs

This uses selectedClass="tc-tab-selected" perhaps try that?

#3

Use filtered attributes for the class attribute of the button widget.

Example:

<$button
	set="!!curTab"
	setTo="Damage"
	class={{{ btn btn-sm btn-dark [{!!curTab}match[Damage]then[myselectedclass]] :and[join[ ]]}}}
>
	Damage
</$button>

Make your life easier with a macro:


\define makeTabButton(tabtitle caption)
<$button
	set="!!curTab"
	setTo=<<__tabtitle__>>
	class={{{ btn btn-sm btn-dark [{!!curTab}match<__tabtitle__>then[myselectedclass]] :and[join[ ]]}}}
>
	<$text text=<<__caption__>>/>
</$button>
\end

<<makeTabButton Overview SessionOverview>>
<<makeTabButton "Squad Composition" "Squad Composition">>
etc...
1 Like
#4

that’s really cool saq!

i couldn’t see the difference as the effect was very subtle on my screen

so just to see the difference more clearly i removed btn-dark from the line

> class={{{ btn btn-sm btn-dark [{!!curTab}match<__tabtitle__>then[myselectedclass]] :and[join[ ]]}}}
> >

and the difference was much more visible with john’s colours

which seems to show john’s original code was partially working (in firefox and chrome on desktop), but just with a very subtle effect (the extra border around the active tab is almost the same colour as the tab)

safari on desktop, on the other hand does not cooperate with the original code, and doesn’t seem to show a difference until utilising your (saq’s) code (note below i’ve moved btn-dark into the match)

\define makeTabButton(tabtitle caption)
<$button
	set="!!curTab"
	setTo=<<__tabtitle__>>
	class={{{ btn btn-sm [{!!curTab}match<__tabtitle__>then[btn-dark]] :and[join[ ]]}}}
>
	<$text text=<<__caption__>>/>
</$button>
\end

<<makeTabButton Overview SessionOverview>>
<<makeTabButton "Squad Composition" "Squad Composition">>
1 Like
#5

Thanks! You made me realize that I was fighting the preset button css from shiraz. I utilized shiraz elements in the python script to produce the tiddler text because it made it easy to get a quick layout. Tweaking the btn-dark css from shiraz made it obvious.


.btn-dark:focus, .btn-dark.focus {
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
 border: 2px solid #f44336
}