SettingsPage
Side-nav tabs on the left with a content area on the right — standard settings layout.
Interactive-mode
Examples
4 tabs with per-tab content
Profile
Update your display name and profile photo.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SettingsPage | Two-column settings layout: a NavList of tab buttons in a fixed-width left sidebar (lg:w-56) and a Content area that fills the remaining width. Tab switching is fully controlled — pass SelectedTab and handle SelectedTabChanged to swap the content. |
| SettingsPage.SettingsTab | Immutable record describing a single sidebar tab. |
SettingsPage
Two-column settings layout: a NavList of tab buttons in a fixed-width left sidebar (lg:w-56) and a Content area that fills the remaining width. Tab switching is fully controlled — pass SelectedTab and handle SelectedTabChanged to swap the content.
| Property | Type | Required | Description |
|---|---|---|---|
| Tabs | IList<SettingsTab>? | Ordered list of tab descriptors displayed in the sidebar nav. | |
| SelectedTab | string? | Key of the currently active tab. Controls the active state in the nav. | |
| SelectedTabChanged | EventCallback<string> | Fired with the new tab key when the user clicks a different tab. | |
| Content | RenderFragment? | Main content area rendered to the right of the nav. |
SettingsPage.SettingsTab
Immutable record describing a single sidebar tab.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string | Display text for the tab button. | |
| Key | string | Unique identifier compared against SelectedTab. | |
| IconSvg | string? | Optional SVG path forwarded to NavListItem.IconSvg. |