Feature Requests: Graphics & Arrangement options for Tabs/Accordions/Carousels

Beta
#1

Just sharing a few little iterations I’d love to see with some of these elements. I didn’t think they were relevant to the last release, but I imagine that these could be useful to users as you introduce responsive element styling.

Anyway…

Graphics for Tabs/Accordions/Carousels
There are all sorts of situations where I’d like to be able to use graphics within the headers for Tabs and Accordions. In my current builds, I’ve resorted to adding something like <span class="tab-icon">[icon shortcode]</span> within the header text, and then styling it with custom CSS - but it would be awesome to be able to control all that styling natively.

I bring it up now because I can picture a use case where I have text and a graphic for tabs at larger breakpoints, but only display the graphic at the XS size. Etc.

I picture the overall settings for the graphic styling (images vs icons, size, colors, etc.) living in the Header module. And then putting the Icon/Image selector right next to all the other controls for the Item Content (e.g. below the other content areas here).

image

And when/if you build the v2 Carousel element, I’d also love to be able to set individual graphics / icons for the little “indicators” too. For example, for a full-screen slider, it would be nice to be able to show specific icons or images for the other slides rather than just dots.

Placement of Tabs
I’d also love native controls for the placement of tabs too. For example, there are times when I want to put the tabs below the content. For example:

image
image535×584 76.9 KB

I’ve tried doing this with CSS & Pro, but I could never figure out how to do it in a clean way (the tabs and the content often overlapped when an image lazy-loaded). So I’ve basically abandoned this approach with Pro (unless you have a suggestion?).

Anyway, one thing I really like about Oxygen’s approach to tabs is that you can place the tabs pretty much wherever you want on the page. So, you can do things like have a vertical stack of tab controls in a lefthand column on a desktop layout, and then switch to a traditional horizontal list of controls on mobile.

Obviously their whole system is different, but I bring it up because it would also be nice to be able to control the placement of the tabs for the different breakpoints too.

Thanks gentlemen. Hope you have a great holiday – and hope you get to take a nice long break. You’ve earned it :slight_smile:

#2

Thanks Devin! We’ll keep the graphics in mind.

To your point about not being able to make the placement work, I don’t think generally speaking that it’s a good fit for any of our elements at the moment. I was just talking to Misho about this over here: UI Proposal and Discussion

Anyway, one thing I really like about Oxygen’s approach to tabs is that you can place the tabs pretty much wherever you want on the page. So, you can do things like have a vertical stack of tab controls in a lefthand column on a desktop layout, and then switch to a traditional horizontal list of controls on mobile.

I think that’s a really good way to go about it. Like a set of buttons/toggles that sync up with content areas that hide/show on the page.

#3

Thanks @alexander re: graphics!

Bummer. I had been hoping it might be a somewhat straightforward mapping – where the builder just puts the x-tabs-panels div before the x-tabs-list on the page when you change the placement to bottom (since it currently puts list before panels). No Christmas Miracle™ for me this year :sob:

#4

I know, sorry. Maybe we could add it as an option to output the tabs below the content. If you’re ok with a potential FOUC and a little javascript, you could try adding this:

window.csGlobal.everinit('[data-x-flip-tabs]', function(el){
   el.insertBefore(el.querySelector('.x-tabs-panels'),el.querySelector('.x-tabs-list'))
})

On your Tabs element add a custom attribute of data-x-flip-tabs with any value. Then when the page loads it will flip the two DOM nodes. Should even work in the live preview.

#5

Neat, I’ll give that a try. Thanks!

#6

You’re welcome!