Tabs
Tab component for Universal Dashboard
Tabs make it easy to explore and switch between different views.
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Tabs

1
New-UDTabs -Tabs {
2
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
3
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
4
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
5
}
Copied!

Vertical Tabs

1
New-UDTabs -Tabs {
2
New-UDTab -Text 'Item One' -Content { New-UDTypography -Text 'Item One' -Variant 'h2' }
3
New-UDTab -Text 'Item Two' -Content { New-UDTypography -Text 'Item Two' -Variant 'h2' }
4
New-UDTab -Text 'Item Three' -Content { New-UDTypography -Text 'Item Three' -Variant 'h2' }
5
} -Orientation vertical
Copied!

Dynamic Tabs

Dynamic tabs will refresh their content when they are selected. You will need to include the -RenderOnActive parameter to prevent all the tabs from rendering even if they are not shown.
1
New-UDTabs -Tabs {
2
New-UDTab -Text 'Item One' -Content { Get-Date } -Dynamic
3
New-UDTab -Text 'Item Two' -Content { Get-Date } -Dynamic
4
New-UDTab -Text 'Item Three' -Content { Get-Date } -Dynamic
5
} -RenderOnActive
Copied!
New-UDTabs
Name
Type
Description
Required
Tabs
ScriptBlock
The tabs to put within this container.
true
Id
String
The ID of the component. It defaults to a random GUID.
false
RenderOnActive
SwitchParameter
Whether to render the tabs when they are clicked. Is this value isn't present, all the tabs are rendered, even if they are not shown.
false
Orientation
String
The orientation of the tabs.
false
Variant
String
Changes the variation of the tabs. Supports fullWidth, scrollable and standard. Available since 2.3
false
ScrollButtons
String
Changes when the scrollbars appear. Supports on, off, auto and desktop. Available since 2.3.
false
Centered
SwitchParameter
Centers the tabs within the tab container. Available since 2.3.
false
New-UDTab
Name
Type
Description
Required
Text
string
The text to display in the header.
false
Content
scriptblock
The content of the tab.
true
Id
string
The ID of the tab.
false
Dynamic
switch
A dynamic tab will reload every time it is selected.
false
Icon
Object
false
Stacked
switch
false
Disabled
SwitchParameter
Disables the tab. Available since 2.3.
false
Last modified 1mo ago