This tool can really help take your Blocs website to the next level. Tab Anything is a special button-group that behaves like tabs or even a slider. It’s designer friendly, allowing you to style the button group as pagination dots, labels or even images. Tab Anything supports both vertical and horizontal orientation. It capable of slide and fade transitions, an optional responsive mobile dropdown button and much more. You can “tab” literally anything, including entire blocs sections themselves!
It’s a button-group that behaves like both tabs and a slider. It’s designer-friendly and supports vertical orientation, slide and fade transitions, an optional responsive mobile dropdown button and more.
Tabs are UI components that help organize content and help reduce the need to scroll the web page.
Button Groups are useful indicators that actions of each button are related.
Tab Anything is a button-group that behaves like tabs. or It has some unexpected features.
Getting Started
It as easy as assigning a class to the target elements you want as tabs. The naming convention for the classes is simple and it’s documented right inside the UI. See documentation here (pdf)
Use Cases
Pricing tables with switchable behavior (ex. monthly, quarterly, yearly)
Elaborate hero sliders with columns, other brics and more!
Alternate product views
Pagination for any elements
Unique mixed media galleries
Key Features
Horizontal, vertical and new* rotated label orientations
New* Filter mode reserves the first tab to show all tab content.
Optional dropdown at smaller screen widths
Choose from Text, Bullets or Bars, Images or Images w/Text as nav style presets.
Generous additional control over styles.
Directional slide & fade transitions for the target elements
I’ve bought it, but only a maximum of 3 tabs ?
would it be possible to put two “tab anything” brics together side by side if I needed 5 tabbed categories ?
Yes you’ll understand why when you use it. It’s a Button Group. It’s meant to extend the button group to new levels. It also has to always be responsively sound. You can only fit so many items horizontally anyway.
Believe me when I say if it where unlimited it actually wouldn’t be a button group. You be tempted to use it wrongly and things would be a mess, trust me. You need this limitation in your life It saves you from many things you shouldn’t be doing with this tool.
Also, Things also get very difficult to manage for the user, once you get past three targets. Remember each of these items has to be on the page in Blocs. It’s like I mentioned before, some limitations are good for you.
Now if you need a traditional tab system like what Blocs has use that too and reach for Tab Anything for things that really make sense not to be a long list. From a UX perspective, lot’s of tabs would be more for text-heavy content and things that you don’t really need each tab to be seen or clicked.
This is a more impactful type of tool. It all but demands that you click or see the content. It’s just not the same thing!
I’m working on them right now. My process for creating these is not perfected yet, so please excuse this. I plan to have some uploaded today so stay tuned!
Well, this definitely got my attention this morning. Might be just the extension I’m looking for on a project.
Can’t wait to see your video demonstrations
Say I have 3 tabs. “All”, “Beige” and “Grey”.
I set tab1-2 for Beige, tab1-3 for Grey
What do I set for “All” ? I can’t assign multiple ID’s to an element. When I click All, I need everything to show.
Seems it would be more flexible with data-target than binary ID’s… or am I missing some trick ?
I wish there was a dedicated demo page for this plug showing its all great features. The current one lacks the demo aspect of it. A short video would be handy as well.
@RobertPetras I agree this would be useful and I’m waiting to see that as well. The one time I tried to implement tabs in Blocs it seemed fiddly, so I avoided them after that. Hopefully this offers a more user friendly solution, much like Card Designer.
Something I like about @Whittfield brics is that they see frequent updates with ongoing development, while any bugs or glitches are not just ignored. I build sites for clients, so I need to have confidence that a custom bric will work as advertised and is supported by the developer before I’ll use it on a website.
I agree that the current Tabs are very fiddly vs how others do it. I’m hoping that @Norm brings a much simpler and easier to edit version of Tabs in Blocs 4.
I think @Eldar has mastered this! So would love to see an in depth video on Tabs.
But I’m looking forward to seeing a in depth video and demo page on what @Whittfield has done as this will be a purchase straight away!
I have just updated the original post above with a demo video. This is only the beginning in terms of videos for this and other brics. Also, I’ll continue to improve on this video over time, it’s very much a work in progress. Thanks for your patience, and to the early adopters who jumped right in!
A question was asked about why I used ID’s. I used them because they should be unique and Blocs will warn if you try to use them multiple times. I’m leveraging this behavior as a feature in Tab Anything
It saves you from many things you shouldn’t be doing with this tool.
so stay tuned!
