Is there a TAB control alternative for small screens?

#1

To prevent multiple tab lines on small screens, has anyone implemented an alternative control for the TAB control?

I want to use the tab control when it will fit, but if it overflows onto multiple lines, I want something else to replace it. And, no, I do not want it to switch to vertical tabs.

I’m struggling with what to replace it with. What I have so far is not exactly elegant. My thought was a hamburger control that, when clicked, would provide a popup of the tab selections. Once selected, it shows that tab’s content below. But, this does not seem appropriate for small screens.

In addition, I don’t think this approach would work well when tabs are nested. Thoughts? Ideas? Thank you.

image

#2

Tabs are effectivly a list of buttons so you can think about it as a set of buttons.

Then the buttons alter what you see below given the button last selected, the result replaces the earlier view.

Perhaps this opens up the posibilities?

Eg a select that chooses what to display.

1 Like
#3

I’m not sure how to interpret your image, but if it works they way I am interpreting it, then I think it would be really neat so I’ll outline my interpretation to see if it is different from what you’re not satisfied with:

But first; you don’t describe it as an issue to distinguish when to use the tabs vs the other solution so it seems you have that part solved. Thus:

In small screen mode, show a hamburger button with the name of the selected (or default) item next to it, like in your image. Clicking the hamburger opens a dropdown listing the buttons. Below this all (not “inside” the hamburger dropdown) it is the contents of the selection.

Sounds neat IMO. The downside is that you don’t see the tab/button names. I guess the hamburger button could stay open until actively clicked again, assuming the dropdown is not of the floating kind but rather pushes the contents down. Detail to save real estate could be to not list the active selection, i.e only have that title appear next to the hamburger button like in your image.

So, as I say, maybe this is exactly what you have right now - in which case I’m wondering what is not good about it?

#4

@twMat I believe you have captured it, except I have only mocked up the example. A pop up menu would appear when the the icon is clicked. I was thinking of writing a macro (I’m not on 5.3 yet) that accepted the same parameters as the existing tab macro. It would either use the existing macro or show this new icon approach.

I might add an additional parameter that would define which control is selected. As @TW_Tones is getting me to think about, perhaps there are more options that this macro could optionally provide too—not just an either or!

I had three things holding me back:

  1. I don’t want a phone’s browser replacing my pop up with an its own selection list of drop downs. I don’t think this would occur.

  2. Nested tabs work for me, but I don’t think they’d work well with this approach.

  3. Someone either had a better solution already, or has better idea.

@TW_Tones @twMat Thank you for the feedback

#5

@twMat Oh, I forgot, I had more idea. It’s kind of a wild one. Wild because I have not thought it all the way through.

I think of the tab control as a container. What if the container was wider than the screen and the user could scroll the content horizontally to view the content on other tabs, which are not presented as tabs, more like columns (like a Kanban). Lots of disadvantages with this one. The biggest—the content of every tab needs to rendered at once.

#6

@TW_Tones Thanks for tip/reminder. I have yet to resolve the problem (responsive on small screens), but your comment made me focus on a very different look. I think I want to change the text on a tab to an icon when the screen is small. Thoughts on this tab look? I have made this configurable, so the end user can determine what they want.

Sidebar:

sidebar
sidebar422×859 93.7 KB

River:

johnbenson2
johnbenson21215×2500 506 KB

1 Like
#7

I can’t see the icons in your examples?

#8

@TW_Tones Yeah, I haven’t done that yet. Sorry, I said I think I want to do it.

#9

Here is an idea for you @clsturgeon

The sidebar uses tabs, If you set the caption on a tiddler tagged $:/tags/SideBar it will be used as the title for example {{$:/core/images/add-comment}} label, what is important to notice is this is a transclusion so the fact is the caption field is being transcluded, that is, the content of the caption field can contain images, wikitext and TiddlyWiki script, including a macro name <<myicon>> or even <<myicon $:/core/images/add-comment "label">> and you could make the macro detect if you are in desktop or mobile mode and only show the icon when in mobile mode.

  • That is as long as you edit the caption field of each of your “tab” tiddlers you can introduce a macro that programaticaly chooses if its icon/lable/icon only.