ion-accordion
手风琴在您的内容中提供可折叠的部分，以减少垂直空间，同时提供组织和分组信息的方法。所有 `ion-accordion` 组件都应分组在 `ion-accordion-group` 组件中。
基本用法
切换手风琴
哪个手风琴是打开的由设置 `ion-accordion-group` 上的 `value` 属性控制。设置此属性允许开发人员以编程方式展开或折叠某些手风琴。
监听手风琴状态更改
开发人员可以监听 `ionChange` 事件，以便在手风琴展开或折叠时收到通知。
控制台从上面的示例中记录时，控制台消息将显示在此处。多个手风琴
开发人员可以使用 `multiple` 属性允许一次打开多个手风琴。
禁用手风琴
单个手风琴
可以使用 `ion-accordion` 上的 `disabled` 属性禁用单个手风琴。
手风琴组
可以使用 `ion-accordion-group` 上的 `disabled` 属性禁用手风琴组。
只读手风琴
单个手风琴
可以使用 `ion-accordion` 上的 `readonly` 属性禁用单个手风琴。
手风琴组
可以使用 `ion-accordion-group` 上的 `readonly` 属性禁用手风琴组。
解剖学
标题
`header` 槽用作将展开或折叠手风琴的切换。我们建议您在此处使用 `ion-item`，以利用可访问性和主题功能。
在 `header` 槽中使用 `ion-item` 时，`ion-item` 的 `button` 属性设置为 `true`，`detail` 属性设置为 `false`。此外，我们还会自动向 `ion-item` 添加一个切换图标。当您展开或折叠手风琴时，此图标将自动旋转。有关更多信息，请参阅 自定义图标。
内容
`content` 槽用作手风琴的一部分，该部分根据手风琴的状态显示或隐藏。您可以在此处放置任何东西，除了另一个 `ion-content` 实例，因为每个页面应该只添加一个 `ion-content` 实例。
自定义
扩展样式
有两种内置的扩展样式：`compact` 和 `inset`。此扩展样式通过 `ion-accordion-group` 上的 `expand` 属性设置。
当 `expand="inset"` 时，手风琴组将获得一个边框半径。在 `md` 模式下，当手风琴打开时，整个手风琴将向下移动。
高级扩展样式
您可以通过根据手风琴的状态进行样式设置来自定义扩展行为。有四个状态类应用于 `ion-accordion`。使用这些类进行样式设置可以创建高级状态转换
| 类名 | 描述 |
|---|---|
.accordion-expanding | 手风琴正在积极扩展时应用 |
.accordion-expanded | 手风琴完全展开时应用 |
.accordion-collapsing | 手风琴正在积极折叠时应用 |
.accordion-collapsed | 手风琴完全折叠时应用 |
如果您需要定位手风琴的特定部分，我们建议直接定位元素。例如，如果您想在手风琴展开时自定义 `header` 槽中的 `ion-item`，您可以使用以下选择器
ion-accordion.accordion-expanding ion-item[slot="header"],
ion-accordion.accordion-expanded ion-item[slot="header"] {
--color: red;
}
图标
在 `header` 槽中使用 `ion-item` 时，我们会自动添加一个 `ion-icon`。`toggleIcon` 属性可以控制所用图标的类型，`toggleIconSlot` 属性可以控制添加它的槽。
如果您想自己管理图标或使用不是 `ion-icon` 的图标，您可以向图标元素添加 `ion-accordion-toggle-icon` 类。
无论您选择哪种选项，图标都会在您展开或折叠手风琴时自动旋转。
主题
由于 `ion-accordion` 充当标题和内容元素周围的外壳，因此您可以轻松地根据需要对手风琴进行主题化。您可以通过定位插槽 `ion-item` 对标题进行主题化。由于您使用的是 `ion-item`，因此您还可以访问所有 ion-item CSS 变量 和 ion-item 阴影部分。通过定位位于 `content` 槽中的元素，也可以轻松实现内容主题化。
可访问性
动画
默认情况下，展开或折叠手风琴项目时会启用动画。当 `prefers-reduced-motion` 媒体查询受支持并设置为 `reduce` 时，动画将自动禁用。对于不支持此功能的浏览器，可以通过在您的 Ionic Framework 应用程序中设置 `animated` 配置来禁用动画。
键盘交互
当在 ion-accordion-group 内使用时，ion-accordion 具有完整的键盘支持，可以与组件交互。下表详细说明了每个键的作用
| 键 | 描述 |
|---|---|
| 空格键 或 回车键 | 当焦点位于手风琴标题时，手风琴将根据组件的状态折叠或展开。 |
| Tab | 将焦点移动到下一个可聚焦元素。 |
| Shift + Tab | 将焦点移动到上一个可聚焦元素。 |
| 向下箭头 | - 当焦点位于手风琴标题时，将焦点移动到下一个手风琴标题。 - 当焦点位于最后一个手风琴标题时，将焦点移动到第一个手风琴标题。 |
| 向上箭头 | - 当焦点位于手风琴标题时，将焦点移动到上一个手风琴标题。 - 当焦点位于第一个手风琴标题时，将焦点移动到最后一个手风琴标题。 |
| Home | 当焦点位于手风琴标题时，将焦点移动到第一个手风琴标题。 |
| End | 当焦点位于手风琴标题时，将焦点移动到最后一个手风琴标题。 |
性能
动画
手风琴动画通过在动画开始时了解 content 插槽的高度来工作。手风琴期望这个高度在整个动画过程中保持一致。因此，开发者应该避免在动画过程中执行任何可能改变内容高度的操作。
例如，使用 ion-img 可能会导致布局偏移，因为它会延迟加载图像。这意味着，当动画播放时，ion-img 将加载图像数据，并且 ion-img 的尺寸将改变以适应加载的图像数据。这会导致 content 插槽的高度改变。开发者有几个选择可以避免这种情况
-
使用没有延迟加载的
img元素。ion-img始终使用延迟加载，但img默认情况下不使用延迟加载。这是最简单的选择，如果你的图像很小，并且不会从延迟加载中明显受益，那么它非常有效。 -
在
ion-img上设置最小宽度和高度。如果你需要使用延迟加载并且提前知道图像的尺寸（例如，如果你加载的是相同大小的图标），你可以在 CSS 中设置ion-img具有最小宽度或高度。这使开发者能够在避免布局偏移的同时获得延迟加载的好处。这在使用带有loading="lazy"的img元素时也适用！ -
如果这两种选择都不适用，开发者可能希望考虑通过在 ion-accordion-group 上使用
animated属性来完全禁用动画。
属性
disabled
| 描述 | 如果为 true，则手风琴无法交互。 |
| 属性 | disabled |
| 类型 | boolean |
| 默认 | false |
mode
| 描述 | 模式决定使用哪个平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认 | undefined |
readonly
| 描述 | 如果为 true，则手风琴无法交互，但不会改变透明度。 |
| 属性 | readonly |
| 类型 | boolean |
| 默认 | false |
toggleIcon
| 描述 | 要使用的切换图标。当手风琴展开或折叠时，此图标将旋转。 |
| 属性 | toggle-icon |
| 类型 | string |
| 默认 | chevronDown |
toggleIconSlot
| 描述 | 在 ion-item 中放置切换图标的插槽。默认为 "end"。 |
| 属性 | toggle-icon-slot |
| 类型 | "end" ｜ "start" |
| 默认 | 'end' |
value
| 描述 | 手风琴的值。默认为自动生成的 value。 |
| 属性 | value |
| 类型 | string |
| 默认 | ion-accordion-${accordionIds++} |
事件
此组件没有可用事件。
方法
此组件没有可用的公共方法。
CSS 阴影部分
| 名称 | 描述 |
|---|---|
content | 内容插槽的包装元素。 |
expanded | 展开的元素。可以与 header 和 content 部分结合使用（例如 ::part(header expanded)）。 |
header | 标题插槽的包装元素。 |
CSS 自定义属性
此组件没有可用的 CSS 自定义属性。
插槽
| 名称 | 描述 |
|---|---|
content | 内容放置在标题下方，根据展开状态显示或隐藏。 |
header | 内容放置在顶部，用于展开或折叠手风琴项目。 |