Skip to content
ModernUI A DaneTrades developer library

Tabs and Accordion

Use tabs and accordions when a panel has more content than should be visible at once.

Main helpers

Helper/control Use it for
Mui::Tabs Manual tab control
Mui::TabsFromNames Quick tab control from string names
Mui::TabsWithSegmentDividers Tabs with divider styling
Mui::Accordion Collapsible sections

TabsFromNames

The fastest way to create tabs is TabsFromNames.

UI build fragment
string names[];
ArrayResize(names,3);
names[0]="General";
names[1]="Risk";
names[2]="Advanced";

MuiTabsBundle tabs=Mui::TabsFromNames(section.body,names,0);

Mui::LabeledTextBox(tabs.Body(0),"Profile","Default");
Mui::LabeledSpinEdit(tabs.Body(1),"Risk %",0.1,10.0,0.1,1.0);
Mui::LabeledCheckbox(tabs.Body(2),"Enable extra checks",false);

Switch tabs programmatically:

UI build fragment
tabs.Selected(g_ui,1);

Selected(root,index) needs the root because selection can affect layout.

Manual tabs

Use raw MuiTabs when you need more control over tab creation, tab headers, icons, or handlers.

UI build fragment
MuiTabs *tabs=Mui::Tabs(parent,0.0,0.0);

Then add tab pages through the lower-level API.

Accordion

Use accordion controls for expandable/collapsible groups.

UI build fragment
MuiAccordion *acc=Mui::Accordion(parent,0.0,0.0);

Use an accordion when:

  • sections are optional
  • the panel has too many settings
  • advanced settings should be hidden until needed
  • users need to focus on one group at a time

Tabs vs accordion

Need Use
Separate pages of related settings Tabs
Optional advanced sections Accordion
A short form with a few groups Sections only
A compact settings drawer DrawerSection plus sections

Intent handlers

ModernUI also supports optional high-level tab and accordion intent handlers.

Use them when you want to react to user-driven changes without replacing the control’s internal behaviour.

Ownership notes

For TabsFromNames:

  • the tabs control is added to the parent
  • tab page bodies are owned by the tabs control
  • bodies[] pointers are convenience handles
  • do not delete tab bodies yourself

Common mistakes

Using tabs for only two small fields

Tabs add navigation cost. For simple panels, use sections.

Deleting TabsFromNames body pointers

The tab control owns its bodies. Treat Body(index) as a handle.

Forgetting root when changing selected tab

Use tabs.Selected(g_ui,index) for the bundle helper.

Related pages