#1

I’d like to create tabs like in the screenshot below. I’m using Quick switcher just as an example here, but of course in reality I’d be adding tabs to my own plugin.

kuva
kuva1023×685 36.8 KB

The purpose is to have most important settings on the first tab, and then put some “extra”, rarely changed settings out of sight on another tab.

Thanks! :slight_smile:

#2

It’s technically possible but you need to do the heavy lifting here. I’m not aware of any pre-made components for this. I guess that’s a “no” to your original question. Sorry!

Edit: I would recommend setting groups instead of tabs. Having tabs on two axes is a bit confusing.

1 Like
#3

Setting groups is a nice idea!

Now the left menu has an item that is my plugin (which actually is Shell commands in the above screenshot, although I had Quick switcher selected). If I understood your suggestion correctly, I would add two smaller items below my plugin’s name in the list: Basic settings and Advanced settings. They would be indented and otherwise graphically displayed in a way that a user understands that they do belong to the Shell commands plugin. If a user would click the Shell commands text in the menu, it would automatically open Basic settings. Did you mean something like this?

I think I could do this, but I’m also thinking about consistency. If some other plugin maker would want to do something similar for their plugin, then all plugins that add “child menu items”, should do it in a consistent way, so that the submenus will have a similar look and behaviour. That’s why an official API for setting groups would be nice, but I do understand if you have other things on your plate. :slightly_smiling_face:

#4

It’s already a consistent UI that the core app is using. Please refer to the screenshot below; group headings are marked in red.

image
image2039×903 98.7 KB

#5

Ah, I understood setting groups completely differently.

I’d still like to have a way to hide rarely used settings from a main settings view, so I guess I will try to create my own tab system (/find a library for this) like described in the first post.

#6

Yes. Another workaround is to have an “Advanced” section at the end. For an example, please see Settings → About → Advanced.

#7

For most situations, the “Advanced” setting group would be the best solution.

My plugin, however, displays a lot of instructions at the bottom of the settings panel, related to variables that can be used in text fields:

kuva
kuva1534×814 134 KB

Putting an “Advanced” section under this wall-of-text could accidentally cause a user not to realize that there is more settings after the instructions. And I do not want to put a bunch of rarely used settings between the instructions and fields where they refer to.

I could of course move these instructions to a documentation file, but I think they should be easily available when editing the settings. One solution could also be to enclose the instructions in a collapsible container. I’m just not the greatest fan of those.

1 Like
#8

How I ended up implementing a tab system

Just an update in case someone else is interested in this kind of UI. I have implemented a custom tab system a few months ago in the Shell commands plugin.

kuva
kuva1011×231 18.1 KB

The basic functionality is based on this example in W3 schools, but I’ve modified it. I’ll put some links here to the relevant parts in my plugin’s source code.

  • CSS
  • TypeScript. You might want to write your own version of the typescript part, but at least this code shows you what kind of HTMLElements to create.

Hypothetically, if there are a few developers willing to use this in their plugins, I might create a separate package of it to make it easier to use, but so far I’ll just assume there is not much need for that. The typescript part at least would need some cleaning up and redesigning in order to better suit other plugins.

4 Likes
#9

One thing the tab system is missing is keyboard navigation. Would be nice to have that.