Tabs

Namespace

using Blazor_Foundation_6.Components.Containers;

Attributes

TabHeader

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
VerticalTrue/False. Tab Link Vertical (True) or Horizontal (False)
AutoManagedTrue/False. Blazor will auto manage Foundation Zurb’s Javascript.
DataOptionsCan include any option available. (See Plugin Options)

TabHeaderTitle

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
ActiveTrue/False. if tab is active on page load.

TabContentWrapper

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
LinkIdId of the TabHeader

TabContent

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
ActiveTrue/False. if tab is active on page load.

Examples

To see visual example, visit Foundation or Download and Run Blazor_Foundation_Test in Visual Studio.

<TabHeader Id="Test-Tab">
    <TabHeaderTitle Id="Test-Tab-Panel-1">Test 1</TabHeaderTitle>
    <TabHeaderTitle Id="Test-Tab-Panel-2">Test 2</TabHeaderTitle>
</TabHeader>
<TabContentWrapper LinkId="Test-Tab">
    <TabContent Id="Test-Tab-Panel-1">Test Panel 1</TabContent>
    <TabContent Id="Test-Tab-Panel-2">Test Panel 2</TabContent>
</TabContentWrapper>