search

tabvengers / spicy-sections

Creative Commons Zero v1.0 Universal
127 stars 10 forks source link

Add vertical tabs to documentation #2

Open hidde opened 3 years ago

hidde commented 3 years ago

It would be nice to somehow support vertical tabs. I find that, because they're based on headings, my tab names tend to get long, this seems easier to manage if they're vertical (at least for left to right / top to bottom)

I have added this in my personal site, would be happy to try and add a PR for this if y'all feel there's a need… 

davatron5000 commented 2 years ago

@hidde Nice. I'm just seeing this. Did you write a new affordance? Or can this be done with CSS?

hidde commented 2 years ago

I did add a new affordance on my site, but mostly as I was looking for an easy to way to set this 'mode' while keeping the horizontal tabs option open.

In CSS, you “only” need to set tab-bar to display: flex and then ::part(tab-list) to flex-direction: column. Here's a quick CodePen: https://codepen.io/hidde/pen/55bb3fa2bd29dc1d416c35eabbf90331

bkardell commented 2 years ago

You could also do this with grid maybe https://spicy-sections.glitch.me/vertical.html

But, given we have two ways to do this that only involve 2 lines of CSS each - is there like... a thing that is missing? When you say "an easy way to set this mode" - you could just add a class, or a more specfic selector or something to say which ones you want to do that particular treatment in CSS, right? I mean, I think you only have the one case, so you don't really even need that on your site, do you?

hidde commented 2 years ago

Brian, you're right, there is no need to add anything special to Spicy Sections, as it just works with CSS via flexbox and, as you say, grid (haven't tried in grid but would say that could be even more intuitive).

I like the example you've created, maybe we can point to it from the main docs?

Happy for this issue to be closed, thanks Dave and Brian for asking the right questions!

davatron5000 commented 2 years ago

Let's make a TODO. I'll update the issue name.