Happy Holidays Everyone!
Tab Anything has a free update available. You should be prompted to install version 1.4 the next time you start Blocs.
A couple of weeks ago I introduced an idea called Tab Lab. It’s helped me validate a few ideas before officially adding them to the project. Today the first group of features have passed validation and been added to version 1.4 (see below)
- Fixed the issue where tabs 10-19 would be visible by default.
- From Tab Lab: Wrap tabs into multiple rows.
- From Tab Lab: Set a consistent tab width across tabs.
- From Tab Lab: Added ability to set a width on the Tab Anything instance itself.
The current way
By default, Tabs are the width of the label plus whatever padding you might have set. You can use “Full Width” setting to evenly distribute the tabs across the container in a nice responsive way.
New options for multiple rows and grids
With these new settings you can 1) set a consistent width for the tabs. 2) have them wrap inside the container. and 3) enforce a width for the Tab Anything instance. Used together these settings can produce multi-row and grid layouts.
Normally you would just leave the Tab Width setting to “auto”.
This is the behavior many of you are already familiar with. But in the images below, I have set the width of tabs to 100px and engaged the “Wrap” option. That’s good, but at this point, the width of the container controls where the tabs will begin to wrap. To force the tabs to wrap at a specific width, we can change that using Max Width setting. Note that clearing this field reverts it back to full width.
Notice for this layout I wanted three tabs/columns across. So as you would expect, a width of 300px would achieve that. However in this case I have the detach setting enabled, which adds a gap between rows and columns. I’ve accounted for the space with an extra 30px.
This feature was inspired by a calendar that @casey1823 designed! Thanks fo sharing!