pattern

Conditionals

An if branch renders one panel or the other. Toggling removes the unused branch from the DOM, so stateful components start fresh when the branch returns.

Page code

// Page
<div class="row">
	<ui.Button label="Toggle panel" primary={ true } onclick={ ToggleExample{} } />
</div>
if model.ShowExample {
	<ui.Disclosure item={ model.FeatureDisclosure } />
} else {
	<p class="server-count">The else branch is visible instead.</p>
}

// Message and update
type ToggleExample struct{}

case ToggleExample:
	m.ShowExample = !m.ShowExample