SxAccordion (折叠面板)

  • Implemented

用于展示可折叠内容的面板集合。对齐 Microsoft Fluent UI Blazor Accordion (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 设置项分组展示
  • 详情内容折叠
  • 多段信息按需展开

约束说明

  • 当前只支持单项展开模式。
  • HeadingTemplate 优先级高于 Heading。

行为说明

  • ActiveId 对应当前展开面板。
  • 点击标题切换展开状态，并触发 ActiveIdChanged。

API

Parameters (SxAccordion)

状态 参数名 类型 默认值 描述
Implemented ActiveId string? null 当前展开项 Id。
Implemented ChildContent RenderFragment? null 面板项内容。
Not Implemented ExpandMode AccordionExpandMode? Multi 多项展开模式。
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 (SxAccordionItem)

状态 参数名 类型 默认值 描述
Implemented Id (继承) string? null 面板 Id。
Implemented Heading string? null 标题文本。
Implemented HeadingTooltip string? null 标题提示。
Implemented HeadingTemplate RenderFragment? null 自定义标题模板。
Implemented Icon string? null 标题图标。
Implemented ChildContent RenderFragment? null 面板内容。
Implemented Disabled (继承) bool false 禁用该面板。
Implemented Loading (继承) bool false 加载状态。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Events

状态 事件名 类型 描述
Implemented ActiveIdChanged EventCallback<string?> 展开项变化时触发。
Implemented OnAccordionItemChange EventCallback<SxAccordionItem> 面板切换时触发。

示例

<SxAccordion @bind-ActiveId="_activeId">
    <SxAccordionItem Id="panel1" Heading="基础信息">
        <SxTypography Variant="TypographyVariant.Body">内容</SxTypography>
    </SxAccordionItem>
    <SxAccordionItem Id="panel2" Heading="高级设置">
        <SxTypography Variant="TypographyVariant.Body">内容</SxTypography>
    </SxAccordionItem>
</SxAccordion>

参考设计 (References)

在 Playground 中打开 →