Skip to content

Tabs

Support
Events No

A tabs element is an array of tabs with content, where the content of those tabs is just an array of other elements.

Usage

To create a tabs element you use New-PodeWebTabs, and supply it an array of -Tabs using New-PodeWebTab. The tabs themselves accept an array of other -Content.

For example, the below renders an element with 3 tabs each containing an image:

New-PodeWebTabs -Tabs @(
    New-PodeWebTab -Name Tab1 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab2 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab3 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
)

Which would look like below:

tabs_layout

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 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab2 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
    New-PodeWebTab -Name Tab3 -Content @(
        New-PodeWebCard -Content @(
            New-PodeWebImage -Source '/pode.web-static/images/icon.png' -Alignment Center
        )
    )
)