New Bric: Tab Anything

Tab Anything is the coolest. :sunglasses:

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!

Here’s a link to Tab Anything’s 2nd generation release update information for safe keeping.

alignment_target_settings colors_settings Index_layout_setting

mobile_accessibility_settings

There’s a lot you can do.

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
  • Keyboard support and other accessibility features
  • Unlimited instances per page
  • 25 tabs per instance.
  • Make slider or tabs from CMS content. (beta)

See documentation here (pdf)

14 Likes

Slow down, I can’t keep up with all these wonderful new brics!

6 Likes

Great work @Whittfield
Looking forward to see the video demonstrations for all your new brics :grinning:

1 Like

I’ve bought it, but only a maximum of 3 tabs ? :frowning:
would it be possible to put two “tab anything” brics together side by side if I needed 5 tabbed categories ?

1 Like

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 :smile: It saves you from many things you shouldn’t be doing with this tool.

2 Likes

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. :wink:

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!

2 Likes

Great @Whittfield. Will you show any video’s how it works to support the bric?

2 Likes

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 :crossed_fingers:t5: so stay tuned!

3 Likes

Thanks!!! Looking forward

Thats the bric you told you me you were working on? The read more one? :smiley:

1 Like

That’s here New Bric: Read More for Blocs

2 Likes

Oh I missed that one! @Whittfield you rock!!

2 Likes

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.

3 Likes

@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.

4 Likes

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!

1 Like

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!

7 Likes

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 :wink:

3 Likes

Nice one - I’ll have a look shortly.

@Whittfield will all these brics have live demo pages too with for example various examples of the brics working?