SxTabs (标签页)

Implemented

用于切换不同视图的导航组件。对齐 Microsoft Fluent UI Blazor Tabs (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

多视图切换
设置页分组
内容区分段展示

约束说明

SxTabPanel 需要提供唯一 Id。
IsHidden 为真时不渲染标签与内容。

行为说明

ActiveTabId 控制当前激活项。
点击标签触发 ActiveTabIdChanged 与 OnClick。
ActiveIndicator 仅在 Standard 风格显示。

API

Parameters (SxTabs)

状态	参数名	类型	默认值	描述
Implemented	`ActiveIndicator`	`bool`	`true`	是否显示激活指示线。
Implemented	`ActiveTabId`	`string?`	`null`	当前激活项 Id。
Implemented	`Orientation`	`SxTabsOrientation`	`Horizontal`	排列方向。
Implemented	`Appearance`	`TabsAppearance`	`Standard`	视觉风格。
Implemented	`Alignment`	`TabsAlignment`	`Start`	对齐方式。
Implemented	`ChildContent`	`RenderFragment?`	`null`	标签内容。
Implemented	`Disabled` (继承)	`bool`	`false`	禁用状态。
Implemented	`Id` (继承)	`string?`	`null`	组件的物理 Id。
Implemented	`Class` (继承)	`string?`	`null`	自定义 CSS 类名。
Implemented	`Style` (继承)	`string?`	`null`	自定义样式。
Implemented	`Title` (继承)	`string?`	`null`	HTML `title` 属性。
Implemented	`AdditionalAttributes` (继承)	`IEnumerable<KeyValuePair<string, object>>?`	`null`	捕获不匹配的 HTML 属性。

Parameters (SxTabPanel)

状态	参数名	类型	默认值	描述
Implemented	`Id`	`string?`	`null`	标签 Id。
Implemented	`Label`	`string`	`""`	标签文本。
Implemented	`Icon`	`string?`	`null`	标签图标。
Implemented	`IconStyle`	`IconStyle`	`Regular`	图标风格。
Implemented	`ContentPadding`	`string?`	`null`	内容区内边距。
Implemented	`MinContentHeight`	`string?`	`null`	内容区最小高度。
Implemented	`IsHidden`	`bool`	`false`	是否隐藏标签。
Implemented	`ChildContent`	`RenderFragment?`	`null`	内容区。
Implemented	`OnClick`	`EventCallback`	-	标签点击事件。
Implemented	`Disabled` (继承)	`bool`	`false`	禁用状态。
Implemented	`Title` (继承)	`string?`	`null`	HTML `title` 属性。
Implemented	`AdditionalAttributes` (继承)	`IEnumerable<KeyValuePair<string, object>>?`	`null`	捕获不匹配的 HTML 属性。

Events

状态	事件名	类型	描述
Implemented	`ActiveTabIdChanged`	`EventCallback<string?>`	激活项改变时触发。
Implemented	`OnClick`	`EventCallback`	标签被点击时触发。

示例

<SxTabs @bind-ActiveTabId="_active">
    <SxTabPanel Id="tab1" Label="个人信息">内容</SxTabPanel>
    <SxTabPanel Id="tab2" Label="安全设置">内容</SxTabPanel>
</SxTabs>

<SxTabs Appearance="TabsAppearance.Capsule" Alignment="TabsAlignment.Center">
    <SxTabPanel Id="tab1" Label="Tab 1">内容</SxTabPanel>
    <SxTabPanel Id="tab2" Label="Tab 2">内容</SxTabPanel>
</SxTabs>

参考设计 (References)

Microsoft Fluent UI Blazor - Tabs API (v4.13.2)

在 Playground 中打开 →