component

Tabs

Select the third tab, then remove a tab. The component clamps its active index from the items prop, and the controls disable at the ends of the range.

The second panel shows more detail.

Page code

// Page
<ui.Tabs items={ model.Tabs } active={ model.TabStart } />
<div class="row">
	<button
		class="ui-button"
		disabled={ len(model.Tabs) <= len(model.FewTabs) }
		onclick={ FewerTabs{} }
	>Fewer tabs</button>
	<button
		class="ui-button"
		class:ui-button-primary={ len(model.Tabs) < len(model.ManyTabs) }
		disabled={ len(model.Tabs) >= len(model.ManyTabs) }
		onclick={ MoreTabs{} }
	>More tabs</button>
</div>

// Messages and update
type FewerTabs struct{}
type MoreTabs struct{}

case FewerTabs:
	m.Tabs = m.FewTabs
case MoreTabs:
	m.Tabs = m.ManyTabs