Adding tabs

[CaptainFalcon92]

This is a re-opening of closed pull-request - #32 - reproducing W98 tabs - #21.

I looked at how tabs behaves in W98 and it looks like normal tabs are justified left.
Then only when tabs become multi-rows then they are justified in full width.
Also i think i remember the row where belongs the active tabs is always pulled down, isn't it ?

Here are some single row tabs:

And some multi-rows tabs:

Here is the HTML

<menu class="tabs">
  <li class="active"><a href="#">Desktop</a></li>
  <li><a href="#">My computer</a></li>
  <li><a href="#">Control panel</a></li>
  <li><a href="#">Devices manager</a></li>
  <li><a href="#">Hardware profiles</a></li>
  <li><a href="#">Performance</a></li>
</menu>
<div class="window">
  <div class="window-body">
    <!-- the tab content -->
  </div>
</div>

For multi-row you can use .multirows.
There is a huge room for improvement on the multi-rows html semantic. Currently each row requires its own menu.

Coming next time :

W98 will always pull down the rows that has the active tab as seen in the demo gif.
I would like to convert menu > li to nav > ul > li in the futur, which would allow having multiple uls instead.
The active ul tab row would simply get pulled-down with an .active class using flex ordering.
We cannot reproduce this behavior with css only until CSS4 is available and supported.

Given i tried to reuse the .window as a tab container i had to find some hacks and made use of z-index in order to pull the active tab upfront and cover the container borders.

Best 🙂

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/jdan/98css/1ts17nxjj
✅ Preview: https://98css-git-master.jdan.now.sh

[CaptainFalcon92]

I tried to add some placeholder documentation for tabs.
Although i'm not very familiar with .ejs files. Sorry if i messed up.

About javascript implementation:
Below is the shortest bit of Vue.js i could think i used to operated those tabs for the demo gif.
https://gist.github.com/CaptainFalcon92/f53dbb58b5c5a36a7606ef86bfad563d

I planned to make a few changes in favor of multi-row tabs soon. Stay tuned.

[jdan]

Hey @JuanGaray93 this one LGTM, wanna give it a stamp?

[juanigaray]

Looks like the quote's missing

[juanigaray]

This looks very good! I think the tabs anchor should be added to the tree view before merging.

[stretch07]

The tabs header isn't in the sidebar.
Any ETA for when this will be merged? @jdan

[ippezshelby]

@CaptainFalcon92 , @jdan any working demo for this! I have a need for this in a project am working on.

thanks

[aohitsugi]

any demo? would like to use this

[juanigaray]

Taking over this PR -- the original branch has been deleted but I can still see the diff.

[juanigaray]

Merged here.