Tab Anything 1.3 - Free Update

There’s a free update available for Tab Anything. It’s new features so I suppose it’s a big deal.

New in v1.3

  1. Full width for vertical tabs was in my original build and didn’t make it to the last update. It’s back.

  2. Tab Anything 1.3 brings back in-app updates. After installing v1.3 any updates I release will trigger a notification in Blocs and you can apply the update using the extension manager.

  3. I’ve given complete padding control for Tabs to the designer. This applies to both horizontal and vertical layouts. This screenshot provided by @chicuelo has been recreated using Tab Anything.
    Original


    Tab Anything 1.3

To get the update log into Gumroad.com using the address you made the purchase with. Reset your password if you aren’t sure.

15 Likes

By the way, if you have a moment, and you do like this bric, please hit that “Like” button and or rate this product on Gumroad!

I’d appreciate it so much, thank you!

Hit the “Like” button.

Give it a rating.

1 Like

Already rated, and I know I have said it before but Tab Anything is brilliant.

I have two versions and now a third! LOL Is this one also a totally separate bric? Can use all three or should I delete version 1, 2, and then install.

One final question, will using version three on my existing project work or will I have to re-do the tabs?

Thanks for all that you do, it’s greatly appreciated.

Casey

You can delete all previous versions. and now with in-app updates it’s going to be much simpler going forward.

The existing projects should be okay, but here are a couple edge cases.

Someone is already using custom classes. might be affected.
“Increase Width” setting has been removed in favor of this new approach. It should only need adjustment though if you start making edits to the bric. Even so it would be a minor adjustment make them wider again with left and right padding option. There’s also a reset button!

Thanks Casey! :smile:

2 Likes

No problem, it overwrote the last version and all my tabs seem to be ok. I was worried as I have a fairly large menu using tabs. The padding controls are a great addition along with vertical feature.

This is such a cool bric, do you know how long it would take to build something like this on a page using the default tabs in Blocs, a long time.

I really appreciate your attention to detail, in my opinion that’s what makes a great add-on.

Casey

3 Likes

this looks great !..nice one @Whittfield

1 Like

Folks I don’t get it.
I spent a hard time trying to achieve something like that with no luck at all.
Can you use the tab-IDs only for blocs or is it possible to give them to paragraphs, images etc.?

Hi Bootsie, it’s fairly easy once you get the hang of it. I start by adding a new bloc, you do not need to add a new Bloc for each tab. I add the tabs anywhere bric last.

I suggest just starting a simple test Bloc to get the feel of using Tabs. Just add an 8 column bloc and in the column add a DIV, give the first DIV an ID name tab1-1. Add another Div below tab-1 and name this one tab1-2. Now add a third DIV ID tab1-3. You now have three tabs setup. Now add a fourth DIV under tab 3 DIV. In the fourth DIV add the tabs-anything brick. It does not require and ID

You now have your structure setup. Add your content inside the first three DIVs. Maybe just add a header and paragraph bric to all three DIVs to see how it works.

Once you have that all setup, click in the tab anything area (div 4), and tab anything will show in the right sidebar. This is where you can name each tab and set the style of the tabs.

Hope this helps,
Casey

Me too.
Thank you very much, I’ll try this and report.

1 Like

Hi @Bootsie, have you watched the video?

Yes I have.
I got it now. Thanks everybody.

2 Likes

@Whittfield I do have a question about Tab Anything. When I place a default Blocs tabs on a page the tabs are contained by the size of the column. If the content is bigger than the column it will wrap and some of the labels will dropdown.

With Tab Anything if the labels are longer than the column they will go outside of the container? Is there a reason for this?

Here’s a link to a calendar I’ve built using default Blocs to show you what I’m talking about.
https://bcrhm.org/events.html

I’m not asking for you to change anything I was just trying to recreate this using Tabs Anything.

casey

This is gorgeous!!

What a cool calendar!

There’s a few of features that require this inline approach, and wrapping didn’t seem so practical until now :wink:

I’ll assess it, but can’t promise anything. If it does pan out, there will likely be a several exceptions and those will need to be handled in an elegant way.

Thanks, the calendars are also using Volt. Great combo, my clients love it.

I’ve been thinking about this and I wonder if it’s possible to just use four rows of tabs with no padding.

Casey

nah, that wouldn’t do it. you’ll have multiple items visible at all times.

At first glance doesn’t look good for a quick fix. But maybe something over time that can happen.

Yup, you’re right. I can make it look like the one I built but the tab anything shows the visible opening of each tab.

You know with every addition there is always some drawbacks.

I was just seeing what I could create with your Bric.

Thanks,
Casey

Hi Casey ,

I came up with some css that seems to work well enough, but it’s certainly not tested well enough to put directly into the bric yet but looks promising (the many exceptions I mentioned).

So I made the Tab Lab bric, try it here:

Tab Lab.bex (37.2 KB)

.
What is Tab Lab ?

This bric is used for for testing ideas that might make their way into the Tab Anything. These experiments can be based in either css, javascript or html. A short desc. of what’s included is listed in the sidebar.
.

This is NOT for production sites, especially unless you know what you’re doing. It’s also not a promise to include a feature in upcoming releases.

.
@casey1823, try this.

  1. Add the bric to the page.
  2. Add the class “wrap” to any Tab Anything instance you want to have this behavior.

I’ve added to Tab Lab the ability to force a consistent width of tabs. While I prefer to use the full-width feature to accomplish this, when you use the “wrap” feature this is super useful to get perfect grids.

Add a special class to a Tab Anything instance. The class should be formatted as “w-100” (you can increment/decrement the number by 10).

Tab Lab.bex (38.0 KB)

1 Like