Tabs
A tabs layout is an array of tabs with content.
The tabs take an array of layouts, that can only be other layouts and not raw elements.
Usage
To create a tabs layout you use New-PodeWebTabs
, and supply it an array of -Tabs
using New-PodeWebTab
. The tabs themselves accept an array of other -Layouts
.
For example, the below renders a layout with 3 tabs each containing an image:
New-PodeWebTabs -Tabs @(
New-PodeWebTab -Name Tab1 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
New-PodeWebTab -Name Tab2 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
New-PodeWebTab -Name Tab3 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
)
Which would look like below:
Cycling Tabs
You can render tabs that automatically cycle through themselves every X seconds, by using -Cycle
and -CycleInterval
. The default interval is every 15secs:
New-PodeWebTabs -Cycle -Tabs @(
New-PodeWebTab -Name Tab1 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
New-PodeWebTab -Name Tab2 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
New-PodeWebTab -Name Tab3 -Layouts @(
New-PodeWebCard -Content @(
New-PodeWebImage -Source '/pode.web/images/icon.png' -Alignment Center
)
)
)