ion-accordion

shadow

手风琴在你的内容中提供可折叠的部分，以减少垂直空间，同时提供组织和分组信息的方式。所有 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

caution

其他组件如 Input 和 Textarea 发出的多数 ionChange 事件会冒泡。因此，如果相关组件在手风琴中使用，这些事件将向上冒泡并触发手风琴组上的 ionChange 监听器。

在手风琴（Accordion）中使用发出 ionChange 的其他组件时，建议在手风琴组（Accordion Group）上的 ionChange 回调中检查传递给回调的事件中的 target 键，以确认 ionChange 是来自手风琴组而不是任何子组件。

🌐 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.

Console

Console 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	当手风琴完全折叠时应用

如果你需要针对手风琴的特定部分，我们建议直接针对该元素。例如，如果你想在手风琴展开时自定义 header 插槽中的 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 变量 和 ion-item 阴影部分。通过定位 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:

键	描述
空格 或 回车	当焦点位于手风琴标题时，手风琴将根据组件状态折叠或展开。
Tab键	将焦点移动到下一个可聚焦元素。
Shift键 + Tab键	将焦点移动到上一个可聚焦元素。
向下箭头	- 当焦点位于手风琴标题时，将焦点移动到下一个手风琴标题。 - 当焦点位于最后一个手风琴标题时，将焦点移动到第一个手风琴标题。
向上箭头	- 当焦点位于手风琴标题时，将焦点移动到上一个手风琴标题。 - 当焦点位于第一个手风琴标题时，将焦点移动到最后一个手风琴标题。
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:

1. 使用不带任何懒加载的 img 元素。ion-img 总是使用懒加载，但 img 默认不使用懒加载。这是最简单的选项，如果你的图片很小且懒加载没有显著好处，这个方法效果很好。
2. 在 ion-img 上设置最小宽度和高度。如果你需要使用懒加载并且事先知道图片的尺寸（例如，如果你要加载相同大小的图标），可以使用 CSS 设置 ion-img 的最小宽度或高度。这为开发者提供了懒加载的好处，同时避免了布局变化。当使用带有 loading="lazy" 的 img 元素时，这也有效！
3. 如果这两种选项都不适用，开发者可能希望通过在 ion-accordion-group 上使用 animated 属性来完全禁用动画。

属性

🌐 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. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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.