[Proof of concept] Simple Tabs using fieldset

[Michael Wiktowy]

Greetings,

I saw use of the fieldset html tag in another message thread here the other day and thought that it would be a neat way to implement a simple minimalistic "tabs" option.

So I hacked it together (see below).

It is best with no more than a few menu options but it will wrap in a usable fashion with more. One might be able to modify it to only display a fixed number of options or width and put some scrolling in with some list filter or CSS trickery but I am not planning to tackle that soon. Just wanted to throw out a proof of concept.

It has hints of old-school BBS text menus of yesteryear / terminal-based GUIs.

Enjoy.

/Mike

\define buttonlabel() <$text text=<<currentTiddler>>/>

\define selectedbuttonlabel() ''<$text text=<<currentTiddler>>/>''

\define menubutton(labeltid:"")
 &nbsp;<$button setTitle="$labeltid$" setTo=<<currentTiddler>>  class="tc-btn-invisible">
<$list filter="[<currentTiddler>compare:string:eq{$labeltid$}]" emptyMessage=<<buttonlabel>> variable=avoid_changing_currentTiddler><<selectedbuttonlabel>></$list>
</$button>&nbsp;
\end

\define tabs-fieldset(filter:"" state:"$:/temp/state")

<fieldset style="display: block;">
<legend><$list filter="$filter$ -[<currentTiddler>]"><<menubutton labeltid:$state$>></$list>&nbsp;</legend>

<$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}} mode="block"/> </$tiddler>

</fieldset>
\end

Examples use to cut and paste into tiddlywiki.com to try it out.

<<tabs-fieldset filter:"[tag[Videos]]">>

<<tabs-fieldset filter:"[tag[Videos]]" state:"$:/temp/altstate">>

[Charlie Veniot]

Not sure what it says about me:  I find this way fun !  Thanks !

For the giggles, I made a small addition:

<fieldset style="display: block;">

<legend><$list filter="$filter$ -[<currentTiddler>]"><<menubutton labeltid:$state$>></$list>&nbsp;</legend>

<div style="height:400px;overflow:scroll;" >

<$tiddler tiddler={{$state$}} > <$transclude tiddler={{$state$}} mode="block"/> </$tiddler>

</div>

</fieldset>

\end

Now I find this feels like fixed-size "screens", and I'm having major flashbacks to dBase IV and Clipper.  Ugh, I'm showing my age ...

[Charlie Veniot]

Or maybe I'm thinking of something else.  Not sure.  Showing my age more ...

[Michael Wiktowy]

Or you can wrap the legend in <tt> tags to really give that TUI feel. : ]

I stuck it up here to share:

https://sextant.space/#tabs-fieldset

/Mike

[Michael Wiktowy]

Actually, it seems that <samp> is the non-deprecated equivalent to <tt>. I switched to that.

/Mike

[Mat]

I've previously only seen one "headline" when using fieldsets. IMO, when using them as tabs there's need for a more visual distinction that default so maybe something like;

fieldset > legend > samp > button {

   background:#f0f0f0 !important;

   padding:0 5px !important;

}

Possibly also

fieldset > legend {

   outline:1px solid silver !important

}

Note that the above will style *all* fieldsets so maybe you'll want to add a special enwrapping class for this concept of yours.

<:-)

[Michael Wiktowy]

Thanks Mat. I'll try these class changes out but CSS is not my forté so most of my development there will be cargo-cultish.

Initially, I was thinking of adding >Menu selection< "brackets" and figure out how to add the first entry to the state tracking tiddler if it didn't exist so that the menu wasn't initially blank. That might help the concept be more intuitive.

WIP,

/Mike