Open hidde opened 3 years ago
@hidde Nice. I'm just seeing this. Did you write a new affordance? Or can this be done with CSS?
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
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?
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!
Let's make a TODO. I'll update the issue name.
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…