Grid CSS to Create a Vertical Tab Like Structure

Create Vertical Tab

Following to Grid CSS in Tiddlywiki Demystified [1] another example of using Grid CSS to create a simple structure like a vertical tab!

  • This can also be used to create small TOC like a right sidebar
  • Can be used for small presentation
  • Can be used to make a small image Gallery

Example i: Life quotes

img_706_%pn

Example ii: Simple image gallery

img_708_%pn

This is the css you need to create the above vertical tab

.tst-container {
display: grid;
grid-template-columns: 100px 1fr;
grid-gap: 20px;
}

.tst-container aside {
border-right: 1px solid #999;
padding-left:5px;
}

Full script

To give a try see the below code!

\define stateTid() $:/temp/lquote/$(currentTiddler)$

\define tidList()
<$list filter=<<__filter__>> variable=item>
<$button class="tc-btn-invisible tc-tiddlylink" 
  setTitle=<<stateTid>> setTo=<<item>> 
  style={{{ [<currentItem>match<item>then[color:red;]] }}}
>
  <$text text=<<item>> />
</$button><br/>
</$list>
\end

\define vtab(filter)
<div class="tst-container">
<$vars currentItem={{{[<stateTid>get[text]] :else[subfilter<__filter__>first[]] }}} >
<aside><<tidList>></aside>
<article><$transclude mode=block tiddler=<<currentItem>> /></article>
</$vars>
</div>
\end

<style>
.tst-container {
display: grid;
grid-template-columns: 100px 1fr;
grid-gap: 20px;
}

.tst-container aside {
border-right: 1px solid #999;
padding-left:5px;
}

</style>

<<vtab "[tag[sample]]">>

Ref

[1]. Grid CSS in Tiddlywiki Demystified - #8

4 Likes

Exercise
Try to use CSS transition/animation effects and create a simple slideshow or image gallery

1 Like

Thanks @Mohammad, very nice.

Can you please add the code for sorting ‘tidList()’?

1 Like

In the above code

Replace

\define tidList()
<$list filter=<<__filter__>> variable=item>

With

\define tidList()
<$list filter="[subfilter<__filter__>sort[]]" variable=item>

But I recommend to keep the original code and call vtab as desired e.g with sort op.

Example

<<vtab "[tag[sample]sort[]]">>

Thanks @Mohammad - you made it!

Very nice, @Mohammad. Thank you for this.

What you have there can be used as a short-form presentation of a large index. (Both columns would need to scroll independently.)

Well yes, you have to turn on scrolling by the overflow-y: scroll

Wow very nice @Mohammad thank you for the trick!

I was thinking of the same thing :slight_smile: