Skip to content

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:

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 -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
        )
    )
)