Tabs

For more examples, visit the Storybook.

Example

<StudsTabs defaultValue="account">
  <StudsTabsList>
    <StudsTabsTrigger value="account">Account</StudsTabsTrigger>
    <StudsTabsTrigger value="password">Password</StudsTabsTrigger>
  </StudsTabsList>
  <StudsTabsContent value="account">
    Account tab content
  </StudsTabsContent>
  <StudsTabsContent value="password">
    Password tab content
  </StudsTabsContent>
</StudsTabs>

`StudsTabs` Props

asChild

boolean

If true, the component will render as a child of the parent component.

defaultValue

string

The value of the tab that should be active when initially rendered.

value

string

The controlled value of the active tab. Should be used with onValueChange.

onValueChange

function

Callback that fires when the active tab is changed.

orientation

"horizontal" | "vertical"

The orientation of the tabs.

dir

"ltr" | "rtl"

The direction of the tabs.

activationMode

"manual" | "automatic"

The activation mode of the tabs.

`StudsTabsList` Props

asChild

boolean

If true, the component will render as a child of the parent component.

loop

boolean

default:"true"

If true, the tabs will loop when navigating.

`StudsTabsTrigger` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the trigger with a content panel.

disabled

boolean

When true, prevents the user from interacting with the tab.

`StudsTabsContent` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the content with a trigger.

forceMount

boolean

Used to force mounting when more control is needed.

For more examples, visit the Storybook.

Example

<StudsTabs defaultValue="account">
  <StudsTabsList>
    <StudsTabsTrigger value="account">Account</StudsTabsTrigger>
    <StudsTabsTrigger value="password">Password</StudsTabsTrigger>
  </StudsTabsList>
  <StudsTabsContent value="account">
    Account tab content
  </StudsTabsContent>
  <StudsTabsContent value="password">
    Password tab content
  </StudsTabsContent>
</StudsTabs>

`StudsTabs` Props

asChild

boolean

If true, the component will render as a child of the parent component.

defaultValue

string

The value of the tab that should be active when initially rendered.

value

string

The controlled value of the active tab. Should be used with onValueChange.

onValueChange

function

Callback that fires when the active tab is changed.

orientation

"horizontal" | "vertical"

The orientation of the tabs.

dir

"ltr" | "rtl"

The direction of the tabs.

activationMode

"manual" | "automatic"

The activation mode of the tabs.

`StudsTabsList` Props

asChild

boolean

If true, the component will render as a child of the parent component.

loop

boolean

default:"true"

If true, the tabs will loop when navigating.

`StudsTabsTrigger` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the trigger with a content panel.

disabled

boolean

When true, prevents the user from interacting with the tab.

`StudsTabsContent` Props

asChild

boolean

If true, the component will render as a child of the parent component.

value

string

A unique value that associates the content with a trigger.

forceMount

boolean

Used to force mounting when more control is needed.

For more examples, visit the Storybook.

Example

<StudsTabs>
    <Tabs>
        <StudsTabsItem Text="Customers">
            Customers content
        </StudsTabsItem>
        <StudsTabsItem Text="Orders">
            Orders content
        </StudsTabsItem>
        <StudsTabsItem Text="Order Details">
            Order details content
        </StudsTabsItem>
    </Tabs>
</StudsTabs>

`StudsTabs` Parameters

RenderMode

TabRenderMode

default:"TabRenderMode.Server"

Gets or sets the render mode for the tabs. Can be either Server or Client.

SelectedIndex

int

default:"-1"

Gets or sets the index of the selected tab.

SelectedIndexChanged

EventCallback<int>

Gets or sets the callback that is invoked when the selected index changes.

Change

EventCallback<int>

Gets or sets the callback that is invoked when a tab selection changes.

Tabs

RenderFragment

Gets or sets the tab items to be displayed.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`StudsTabsItem` Parameters

Text

string

Gets or sets the text content of the tab.

Icon

string

Gets or sets the icon for the tab.

IconColor

string

Gets or sets the color of the tab icon.

Selected

bool

default:"false"

Gets or sets whether this tab is selected.

Disabled

bool

default:"false"

Gets or sets whether this tab is disabled.

Visible

bool

default:"true"

Gets or sets whether this tab is visible.

Template

RenderFragment<StudsTabsItem>

Gets or sets custom template content for the tab.

ChildContent

RenderFragment

Gets or sets the content to be displayed when the tab is selected.

Attributes

IDictionary<string, object>

Gets or sets the arbitrary attributes.

Style

string

Gets or sets the style.

Getting Started

Foundations

Components

Integration

Content

`StudsTabs` Props

`StudsTabsList` Props

`StudsTabsTrigger` Props

`StudsTabsContent` Props

`StudsTabs` Props

`StudsTabsList` Props

`StudsTabsTrigger` Props

`StudsTabsContent` Props

`StudsTabs` Parameters

`StudsTabsItem` Parameters

Getting Started

Foundations

Components

Integration

Content

​StudsTabs Props

​StudsTabsList Props

​StudsTabsTrigger Props

​StudsTabsContent Props

​StudsTabs Props

​StudsTabsList Props

​StudsTabsTrigger Props

​StudsTabsContent Props

​StudsTabs Parameters

​StudsTabsItem Parameters

`StudsTabs` Props

`StudsTabsList` Props

`StudsTabsTrigger` Props

`StudsTabsContent` Props

`StudsTabs` Props

`StudsTabsList` Props

`StudsTabsTrigger` Props

`StudsTabsContent` Props

`StudsTabs` Parameters

`StudsTabsItem` Parameters