Making subpanels in the UI

The easiest way to split the user interface into several visual groups is to registers several separate panels in the Blender Python API and merge them by setting the same “bl_category” parameter. In this case, we get some arranged vertically panels, which can be independently collapsed and expanded.

However, sometimes it is necessary to show or hide some information within a single panel, for example, to provide multiple levels of nesting of the UI.

We can organize such a sub-panel inside the main panel by compiling its elements ourselves.

First, let’s create and register a panel in the Blender Python API and place several properties on it.

Here we have created and registered a custom UI panel that will be displayed on the N-panel in the 3D viewport window. We also placed some render settings on it: the renderer engine, the render resolution, and the output path to save the finished file.

Let’s now make it possible to hide and show the render resolution fields as if they were in a separate sub-panel.

To start, define a custom property in which we will track the current state of our custom subpanel – whether it is collapsed or expanded.

We need to import the “BoolProperty” type and register a custom property of this type for the scene in the “register” function. Let’s named it “subpanel_status”:

Place the created property on the UI panel, and make it look like a button by enabling the toggle mode and turning off the text display.

In the first line, we have defined a row for the elements’ arrangement.

In the “icon” variable, we, depending on the current state of the panel (collapsed or expanded), set an icon with the “right arrow” or with the “down arrow”.

After that, we display our “subpanel_status” property as a button with a given icon.

And on the last line, we specify the title for our sub-panel. Separated from the button property so that it is not centered and does not change its color when the sub-panel is collapsed or expanded.

Now we just need to add a condition so that the render resolution fields would be shown depending on the “subpanel_status” property value.

Also, to make them look more similar to the whole panel, wrap the fields into a “box” frame.

Now, when we click on the button with the arrow, the fields with the render resolution will be hidden or displayed as if they were in a separate UI sub-panel

The final code:

*.blend и *.py files with the example for my subscribers on Patreon.

5 2 votes
Article Rating
Notify of

0 Comment
Inline Feedbacks
View all comments