ion-accordion
手风琴在内容中提供可折叠的部分，以减少垂直空间，同时提供一种组织和分组信息的方式。所有 ion-accordion 组件应分组在 ion-accordion-group 组件内。
¥Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All ion-accordion components should be grouped inside ion-accordion-group components.
基本用法
¥Basic Usage
切换手风琴
¥Toggle Accordions
通过设置 ion-accordion-group 上的 value 属性来控制打开哪个手风琴。设置此属性允许开发者以编程方式展开或折叠某些折叠面板。
¥Which accordion is open is controlled by setting the value property on ion-accordion-group. Setting this property allows developers to programmatically expand or collapse certain accordions.
监听 According 状态的变化
¥Listen for Accordion State Changes
大多数由其他组件（例如 输入 和 文本区）发出的 ionChange 事件会冒泡。因此，如果在 Accordion 内部使用关联的组件，这些事件将会冒泡并导致 Accordion Group 上的 ionChange 监听器触发。
¥Most ionChange events emitted by other components such as Input and Textarea bubble. As a result, these events will bubble up and cause your ionChange listener on the Accordion Group to fire if the associated components are used inside of an Accordion.
当使用在 Accordion 内部发出 ionChange 的其他组件时，建议让 Accordion Group 上的 ionChange 回调检查传递给回调的事件上的 target 键，以验证 ionChange 是否来自 Accordion Group 而不是任何后代。
¥When using other components that emit ionChange inside of Accordion it is recommended to have the ionChange callback on Accordion Group check the target key on the event passed to the callback to verify that ionChange is coming from the Accordion Group and not any descendants.
开发者可以监听 ionChange 事件，以便在手风琴展开或折叠时收到通知。
¥Developers can listen for the ionChange event to be notified when accordions expand or collapse.
ConsoleConsole messages will appear here when logged from the example above.多个手风琴
¥Multiple Accordions
开发者可以使用 multiple 属性允许同时打开多个手风琴。
¥Developers can allow multiple accordions to be open at once with the multiple property.
禁用手风琴
¥Disabling Accordions
单个手风琴
¥Individual Accordion
可以在 ion-accordion 上使用 disabled 属性禁用单个手风琴。
¥Individual accordions can be disabled with the disabled property on ion-accordion.
手风琴组
¥Accordion Group
可以使用 ion-accordion-group 上的 disabled 属性禁用手风琴组。
¥The accordion group can be disabled with the disabled property on ion-accordion-group.
只读手风琴
¥Readonly Accordions
单个手风琴
¥Individual Accordion
可以在 ion-accordion 上使用 readonly 属性禁用单个手风琴。
¥Individual accordions can be disabled with the readonly property on ion-accordion.
手风琴组
¥Accordion Group
可以使用 ion-accordion-group 上的 readonly 属性禁用手风琴组。
¥The accordion group can be disabled with the readonly property on ion-accordion-group.
剖析
¥Anatomy
标头
¥Header
header 插槽用作展开或折叠手风琴的切换开关。我们建议你在此处使用 ion-item 以利用辅助功能和主题功能。
¥The header slot is used as the toggle that will expand or collapse your accordion. We recommend you use an ion-item here to take advantage of the accessibility and theming functionalities.
当在 header 插槽中使用 ion-item 时，ion-item 的 button 属性设置为 true，detail 属性设置为 false。此外，我们还会自动为 ion-item 添加一个切换图标。当你展开或折叠手风琴时，该图标将自动旋转。请参阅 自定义图标 了解更多信息。
¥When using ion-item in the header slot, the ion-item's button prop is set to true and the detail prop is set to false. In addition, we will also automatically add a toggle icon to the ion-item. This icon will automatically be rotated when you expand or collapse the accordion. See Customizing Icons for more information.
内容
¥Content
content 插槽用作手风琴的一部分，根据手风琴的状态显示或隐藏。你可以在此处放置任何内容，但另一个 ion-content 实例除外，因为每页只应添加一个 ion-content 实例。
¥The content slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another ion-content instance as only one instance of ion-content should be added per page.
定制化
¥Customization
扩展样式
¥Expansion Styles
有两种内置的扩展样式：compact 和 inset。此扩展样式是通过 ion-accordion-group 上的 expand 属性设置的。
¥There are two built in expansion styles: compact and inset. This expansion style is set via the expand property on ion-accordion-group.
当 expand="inset" 时，手风琴组被赋予一个边界半径。在 md 模式下，打开时整个手风琴将向下移动。
¥When expand="inset", the accordion group is given a border radius. On md mode, the entire accordion will shift down when it is opened.
高级扩展样式
¥Advanced Expansion Styles
你可以根据手风琴的状态通过样式来自定义扩展行为。有四个状态类别应用于 ion-accordion。使用这些类的样式可以让你创建高级状态转换：
¥You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to ion-accordion. Styling using these classes can allow you to create advanced state transitions:
| 类名称 | 描述 |
|---|---|
.accordion-expanding | 当手风琴主动展开时应用 |
.accordion-expanded | 当手风琴完全展开时应用 |
.accordion-collapsing | 当手风琴主动折叠时应用 |
.accordion-collapsed | 当手风琴完全折叠时应用 |
如果你需要定位手风琴的特定部分，我们建议直接定位该元素。例如，如果你想在折叠面板展开时自定义标题槽中的 ion-item，则可以使用以下选择器：
¥If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
ion-accordion.accordion-expanding ion-item[slot="header"],
ion-accordion.accordion-expanded ion-item[slot="header"] {
--color: red;
}
图标
¥Icons
当在 header 插槽中使用 ion-item 时，我们会自动添加 ion-icon。使用的图标类型可以通过 toggleIcon 属性控制，并且它添加到的槽可以通过 toggleIconSlot 属性控制。
¥When using an ion-item in the header slot, we automatically add an ion-icon. The type of icon used can be controlled by the toggleIcon property, and the slot it is added to can be controlled with the toggleIconSlot property.
如果你想自己管理图标或使用不是 ion-icon 的图标，你可以将 ion-accordion-toggle-icon 类添加到图标元素。
¥If you would like to manage the icon yourself or use an icon that is not an ion-icon, you can add the ion-accordion-toggle-icon class to the icon element.
无论你选择哪个选项，当你展开或折叠手风琴时，图标都会自动旋转。
¥Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
主题化
¥Theming
由于 ion-accordion 充当标题和内容元素周围的外壳，因此你可以轻松地为手风琴设置你想要的主题。你可以通过定位 ion-item 来设置标题主题。由于你使用的是 ion-item，因此你还可以访问所有 ion-item CSS 变量 和 Ionic 项目阴影部分。通过定位 content 插槽中的元素也可以轻松实现内容主题化。
¥Since ion-accordion acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted ion-item. Since you are using ion-item, you also have access to all of the ion-item CSS Variables and ion-item Shadow Parts. Theming the content is also easily achieved by targeting the element that is in the content slot.
无障碍
¥Accessibility
动画
¥Animations
默认情况下，展开或折叠手风琴项目时会启用动画。当支持 prefers-reduced-motion 媒体查询并将其设置为 reduce 时，动画将自动禁用。对于不支持此功能的浏览器，可以通过在 Ionic Framework 应用中设置 animated 配置来禁用动画。
¥By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the prefers-reduced-motion media query is supported and set to reduce. For browsers that do not support this, animations can be disabled by setting the animated config in your Ionic Framework app.
键盘交互
¥Keyboard Interactions
当在 ion-accordion-group 内部使用时，ion-accordion 具有与组件交互的完整键盘支持。下表详细说明了每个键的作用：
¥When used inside an ion-accordion-group, ion-accordion has full keyboard support for interacting with the component. The following table details what each key does:
| 密钥 | 描述 |
|---|---|
| Space 或 Enter | 当焦点位于手风琴标题上时，手风琴将根据组件的状态折叠或展开。 |
| Tab | 将焦点移至下一个可聚焦元素。 |
| Shift + Tab | 将焦点移至上一个可聚焦元素。 |
| Down Arrow | * 当焦点位于手风琴标题上时，将焦点移动到下一个手风琴标题。 - 当焦点位于最后一个手风琴标题上时，将焦点移动到第一个手风琴标题。 |
| Up Arrow | * 当焦点位于手风琴标题上时，将焦点移动到上一个手风琴标题。 - 当焦点位于第一个手风琴标题上时，将焦点移动到最后一个手风琴标题。 |
| Home | 当焦点位于折叠式标题上时，将焦点移动到第一个折叠式标题。 |
| End | 当焦点位于折叠式标题上时，将焦点移动到最后一个折叠式标题。 |
性能
¥Performance
动画
¥Animations
手风琴动画的工作原理是在动画开始时了解 content 槽的高度。手风琴期望这个高度在整个动画中保持一致。因此，开发者应避免在动画期间执行任何可能改变内容高度的操作。
¥The accordion animation works by knowing the height of the content slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
例如，使用 ion-img 可能会导致布局变化，因为它延迟加载图片。这意味着当动画播放时，ion-img 将加载图片数据，并且 ion-img 的尺寸将更改以适应加载的图片数据。这可能会导致 content 插槽的高度发生变化。开发者有几种选择可以避免这种情况：
¥For example, using ion-img may cause layout shifts as it lazily loads images. This means that as the animation plays, ion-img will load the image data, and the dimensions of ion-img will change to account for the loaded image data. This can result in the height of the content slot changing. Developers have a few options for avoiding this:
-
使用
img元素而不进行任何延迟加载。ion-img始终使用延迟加载，但img默认不使用延迟加载。这是最简单的选项，如果你的小图片不能从延迟加载中获得显着的好处，那么它会很有效。¥Use an
imgelement without any lazy loading.ion-imgalways uses lazy loading, butimgdoes not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading. -
在
ion-img上设置最小宽度和高度。如果你需要使用延迟加载并提前知道图片的尺寸（例如，如果你正在加载相同大小的图标），则可以使用 CSS 将ion-img设置为具有最小宽度或高度。这为开发者提供了延迟加载的好处，同时避免了布局变化。当将img元素与loading="lazy"一起使用时，这也适用！¥Set a minimum width and height on
ion-img. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set theion-imgto have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using animgelement withloading="lazy"too! -
如果这些选项都不适用，开发者可能需要考虑通过使用 ion-accordion-group 上的
animated属性来完全禁用动画。¥If neither of these options are applicable, developers may want to consider disabling animations altogether by using the
animatedproperty on ion-accordion-group.
属性
¥Properties
disabled
| Description | If true, the accordion cannot be interacted with. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
mode
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
readonly
| Description | If true, the accordion cannot be interacted with, but does not alter the opacity. |
| Attribute | readonly |
| Type | boolean |
| Default | false |
toggleIcon
| Description | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. |
| Attribute | toggle-icon |
| Type | string |
| Default | chevronDown |
toggleIconSlot
| Description | The slot inside of ion-item to place the toggle icon. Defaults to "end". |
| Attribute | toggle-icon-slot |
| Type | "end" ｜ "start" |
| Default | 'end' |
value
| Description | The value of the accordion. Defaults to an autogenerated value. |
| Attribute | value |
| Type | string |
| Default | ion-accordion-${accordionIds++} |
事件
¥Events
No events available for this component.
方法
¥Methods
No public methods available for this component.
CSS 阴影部分
¥CSS Shadow Parts
| Name | Description |
|---|---|
content | The wrapper element for the content slot. |
expanded | The expanded element. Can be used in combination with the header and content parts (i.e. ::part(header expanded)). |
header | The wrapper element for the header slot. |
CSS 自定义属性
¥CSS Custom Properties
No CSS custom properties available for this component.
插槽
¥Slots
| Name | Description |
|---|---|
content | Content is placed below the header and is shown or hidden based on expanded state. |
header | Content is placed at the top and is used to expand or collapse the accordion item. |