前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本文聚焦 Microsoft FAST 组件体系中AccordionItem的expanded属性讲解它如何通过布尔值与同名 HTML 属性驱动手风琴面板的展开/收起并结合Accordion的expandmode单开/多开行为、change事件以及设计系统注册方式给出可直接复制使用的完整示例。阅读完本文你将掌握如何在 FAST 应用中声明式初始化展开面板、动态读写expanded状态以及如何自定义 AccordionItem 的模板与图标。属性定义与签名在microsoft/fast-foundation中AccordionItem类代表手风琴组件中的一个独立面板item。它继承了FoundationElement并公开了三个核心属性expanded、headinglevel与id。expanded属性的官方 API 文档sites/website/src/docs/1.x/api/fast-foundation.accordionitem.expanded.md定义如下Expands or collapses the item.签名Signatureexpanded: boolean;RemarksHTML attribute: expanded这段文档虽短却明确了三个关键事实类型为布尔值expanded: boolean是手风琴面板状态的唯一开关语义为“展开或收起该项”true表示面板内容可见展开false表示隐藏收起与 HTML 属性同名映射该属性可直接由expanded这个 HTML 布尔属性驱动即fast-accordion-item expanded与fast-accordion-item分别对应展开与收起的初始状态。在完整 API 视图中的定位expanded并不是孤立存在的属性它与AccordionItem类的整体设计紧密关联。根据 fast-foundation.accordionitem.md 中自动生成的 API 文档AccordionItem的完整属性列表为属性类型描述expandedbooleanExpands or collapses the item展开或收起该项headinglevel1 \| 2 \| 3 \| 4 \| 5 \| 6配置标题元素的无障碍级别ARIAaria-levelidstring面板的唯一标识The item ID同时该类的模板与事件约定如下插槽Slotsstart标题与图标之间的内容、endstart 槽与图标之间的内容、heading作为面板标题与展开按钮文本的内容、默认插槽面板正文内容、expanded-icon展开状态图标、collapsed-icon收起状态图标CSS Partsheading、button、heading-content、icon、expanded-icon、collapsed-icon、region面板内容区的包装器事件点击按钮时触发自定义change事件。expanded状态直接驱动了上述模板中expanded-icon/collapsed-icon两个图标槽的切换以及region内容区的显隐——这正是“Expands or collapses the item”在渲染层的落地方式。声明式用法HTML 属性初始化expanded最常见的用法是在标记markup中作为布尔属性直接声明。参考 fast-accordion.mdx 中的官方使用示例fast-accordion fast-accordion-item expanded span slotheadingPanel one/span Panel one content /fast-accordion-item fast-accordion-item span slotheadingPanel two/span Panel two content /fast-accordion-item fast-accordion-item expanded span slotheadingPanel three/span Panel three content /fast-accordion-item /fast-accordion要点说明在 HTML 中出现expanded属性无论其值为何布尔属性按“出现即 true”解析时面板初始即为展开状态不写该属性则为收起状态该用法与原生 HTML 布尔属性的语义完全一致也是 FAST 组件“声明式优先”设计理念的体现——expanded属性与 HTML attribute 直接一一对应。注意若显式写为expandedfalse在 HTML 布尔属性语义下它依然视为 true。需要通过 JS 动态收起时应直接设置item.expanded false或移除该属性。交互行为与 Accordion 的 expandmode 联动expanded并非仅仅是一个静态状态位它的行为受父级Accordion的expandmode属性约束。根据 fast-foundation.accordion.md 与 fast-foundation.accordion.expandmode.mdAccordion.expandmode类型为AccordionExpandMode该枚举取值为{ single: single, multi: multi }见 fast-foundation.accordionexpandmode.mdsingle默认同一时刻只允许一个面板展开。用户展开新面板时之前展开的面板会自动收起expanded状态由 Accordion 统一协调multi允许多个面板同时保持展开状态每个AccordionItem的expanded相互独立。对应到 HTML 属性为expand-mode!-- 单开模式默认 -- fast-accordion fast-accordion-item expanded.../fast-accordion-item fast-accordion-item.../fast-accordion-item /fast-accordion !-- 多开模式允许两个面板同时展开 -- fast-accordion expand-modemulti fast-accordion-item expanded.../fast-accordion-item fast-accordion-item expanded.../fast-accordion-item /fast-accordion因此在使用expanded时务必要同时考虑父级Accordion的展开模式在single模式下即使你在标记中为多个面板都写了expanded交互时仍会被协调为最多一个面板展开只有multi模式才能实现多个面板同时展开。编程式读写与事件监听expanded是可读写的实例属性可以在运行时通过 JavaScript / TypeScript 直接控制// 获取面板元素 const items document.querySelectorAll(fast-accordion-item); // 读取当前展开状态 console.log(items[0].expanded); // true 或 false // 编程式展开/收起 items[1].expanded true; // 展开 items[1].expanded false; // 收起当用户点击面板的展开按钮时AccordionItem会触发一个自定义的change事件描述为 “Fires a custom change event when the button is invoked”。配合事件监听可以感知expanded状态的切换items[0].addEventListener(change, () { console.log(Panel 0 expanded: ${items[0].expanded}); });从源码结构看AccordionItem的按钮部分CSS Partbutton是触发change事件与expanded翻转的交互入口而heading、heading-content、icon等 CSS Parts 共同构建了该按钮的渲染结构参见 fast-foundation.accordionitem.md 的 CSS Parts 与 Slots 列表。自定义图标与展开/收起视觉反馈expanded状态还会影响图标槽的渲染模板中定义了expanded-icon与collapsed-icon两个插槽参见 fast-foundation.accordionitemtemplate.md 中accordionItemTemplate: FoundationElementTemplateViewTemplateAccordionItem, AccordionItemOptions的定义。在 Design System 注册时可以通过AccordionItemOptions注入默认图标import { provideFASTDesignSystem, fastAccordion, fastAccordionItem, } from microsoft/fast-components; provideFASTDesignSystem() .register( fastAccordion(), fastAccordionItem({ collapsedIcon: ...your collapsed icon..., expandedIcon: ...your expanded icon..., }) );如需在单个面板上覆盖可通过具名槽slotexpanded-icon/slotcollapsed-icon插入自定义图标内容。这样expanded从false翻转为true时视觉上会同步呈现“收起图标 → 展开图标”的切换为用户提供清晰的展开状态反馈。通过 Composition API 构建自定义 AccordionItem如果你不直接使用fast-accordion-item而是基于microsoft/fast-foundation的 Composition API 构建自己的设计体系expanded属性同样会继承到自定义组件中。参考官方文档的自定义示例fast-accordion.mdximport { AccordionItem, AccordionItemOptions, accordionItemTemplate as template, } from microsoft/fast-foundation; import { accordionItemStyles as styles } from ./my-accordion-item.styles; export const myAccordionItem AccordionItem.composeAccordionItemOptions({ baseName: accordion-item, template, styles, collapsedIcon: ...default collapsed icon..., expandedIcon: ...default expanded icon..., });自定义后的组件如my-accordion-item依然支持expanded布尔属性与同名 JS 属性且继承change事件与全部 CSS Parts。而fastAccordionItem的注册函数fast-components.fastaccordionitem.md返回的正是FoundationElementRegistryAccordionItemOptions, ...并生成fast-accordion-item元素内部实现即来自accordionItemTemplate与AccordionItem类。使用建议与注意点初始状态用 HTML 属性在服务端渲染或静态模板中通过expanded属性声明默认展开的面板简单且符合声明式规范运行时状态用属性赋值动态控制展开/收起时直接读写item.expanded不要试图通过setAttribute(expanded, false)来收起——HTML 布尔属性不会因此解析为false区分展开模式多面板同时展开的需求必须依赖expand-modemulti否则expanded会被single模式协调覆盖无障碍考量expanded与headinglevel配置aria-level配合使用可确保手风琴标题层级符合页面大纲结构1.x 版本语境本文所有 API 签名、注册方式与模板定义均以仓库中sites/website/src/docs/1.x/下的文档为准对应包为microsoft/fast-foundation与microsoft/fast-components。小结AccordionItem.expanded是 FAST 手风琴组件中控制面板展开状态的核心布尔属性。它以boolean类型声明与同名 HTML 属性一一映射受父级Accordion.expandmode的协调约束并驱动模板中图标槽与内容区region的切换。掌握它的声明式用法、编程式读写、事件监听以及自定义组件中的继承行为即可在 FAST 应用中完整驾驭手风琴面板的展开/收起交互。进一步阅读仓库内文档AccordionItem 类完整 APIAccordionItem 模板变量定义Accordion 类与 expandmode 说明AccordionExpandMode 枚举fast-accordion 组件完整使用指南fastAccordionItem 设计系统注册函数赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FaCollapsible 折叠面板Vue 3 手风琴与展开/收起动画的组件化实践FaCollapsible 折叠面板Vue 3 手风琴与展开/收起动画的组件化实践 导读 FaCollapsible 是面向 AI 编程的管理系统框架兼容前端AI 技能Layui动态渲染手风琴面板时默认展开问题的解决方案Layui动态渲染手风琴面板时默认展开问题的解决方案 问题背景 在使用Layui框架开发Web应用时开发者经常需要动态渲染手风琴Collapse组件。手风前端UI组件rsuite Accordion 边框模式实战使用 bordered 属性构建带边框的手风琴面板rsuite Accordion 边框模式实战使用 bordered 属性构建带边框的手风琴面板 手风琴Accordion组件用于在有限的空间内展示大量内前端UI组件上一篇终极指南JSON到Java对象自动转换神器下一篇OpCore Simplify 黑苹果安装指南从硬件报告到可用 OpenCore EFI 的自动化配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考