Does UIkit: Tabs support more styles other than the single line border?
E.g. Classic style with borders, radio buttons, first and last items with rounded, icons in Tab Names and a combination of these different options?
Ayyn make a stack that introduces a bit of customisation, otherwise it’s down to using CSS. I have a few snippets that I use when needed, but really, for me, I use Tabs stack “as-is” when all that’s needed is a clean simple tab system, when something more customisable is needed I use a third party option.
Switcher from Stacks4stacks is a great option, and should cover most needs. Or, if you want to make something really special, @tav Big White Duck Limelight is the tool for the job.
I was playing with LL and Uikit at the weekend making tabs, this is the result. https://ci-clientservices.com/clientdev/llschedule/uikit/ This is just a mild flavour of what is possible with LL.
Hi @energy,
The Axyn Tab Customizer, can highly modify the look of the UIKit3 tabs.
Classic style with borders already supported.
You can easily add UIkit icons to the tab items as well.
That’s all possible with the current version.
I have a new version coming out VERY soon, that you can customize the active and inactive tabs, turn the into buttons etc.
I’ll post some examples here later today.
Cheers,
Ricardo
I just pushed out a new version of the Tab Customizer.
You can check for details here: https://axyn.com/site/products/Tab-customizer/
Cheers,
Ricardo
Hi Ricardo, apologies for the above comment. On reading it back it may have come across as derogatory to Tab Customiser. It wasn’t intended. Weather is terrible today so I have a day in the office, I’ll update and give the new version a whirl.
had a play, couple of comments…
Tabs needs a way to control font size at breakpoints. Typically I use CSS to adjust the tab title font size at various breakpoints, but adding it to your stack would be cool. Also, control over the tab gaps.
Most of all though, Tabs in UIkit needs a way to handle things on small screens (smart phones). At the moment, if you have a few items with long tab titles, everything just crashing into each other. At the very least the tabs need to change to a button/pill/predefined shape below a breakpoint and wrap.
Hi @steve,
Thanks for the kind comments and for taking the time to give the Tab Customizer a whirl. I do value your comments and suggestions.
I definitely agree that the UIKit3 tabs needs some additional customizations. I plan to add some additional font customizations, as well as responsive behavior for small screens. For small screens, I’d like to setup break points where the tabs would stack vertically.
Cheers,
Ricardo.
vertical (stacked) is a solution in some instances, IMO. But, if there are more than four or five tabs the stacks ends up too high. Again IMO, but better to have the tabs wrap. Whatever you go for (or both?) it’s important to be able to define the shape (radius) of the tabs at each breakpoint: Going for the “traditional” tab look by adding some radius to the top corners can look nice, but it looks odd when they stack/wrap. So you need to be able to shape the tabs as buttons too.
I just pushed out v1.1.2 of the Tab Customizer Stacks.
On the previous version you can already style them as buttons, the project file shows how. You can also do a more traditional styling of tabs.
Added to this version:
-Ability to color the text of the active tab.
-Responsive font sizing
-Custom padding of the tab and space between tabs
I decided not to stack them in small screens, instead I chose to have the fonts automatically shrink.
Cheers,
Ricardo
1 Like