Ionic v6 Ion手风琴默认打开第一个项目

Question

我们将应用程序从v5升级到了v6，我们有一个页面显示可扩展项目，我们认为我们会使用新引入的ion-accordion，问题是在页面加载时，所有项目都被折叠，我希望第一个项目被展开，而所有其他项目都被关闭。我可以在ion-accordion上设置任何属性来实现这一点吗？

Answer 1

在浏览了官方文档后，我发现默认情况下可以使用ion-accordion-group标签上的value属性来扩展项目。

<ion-accordion-group value="colors">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>

注意，ion-accordion中的值等于ion-accordion-group中的值。

Answer 2

如果用手风琴的名称设置的值，默认值将是所提到的手风琴扩展

<!-- Multiple Accordions -->
<ion-accordion-group [multiple]="true" [value]="['colors', 'numbers']">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header">
<ion-label>Numbers</ion-label>
</ion-item>
<ion-list slot="content">
<ion-item>
<ion-label>one</ion-label>
</ion-item>
<ion-item>
<ion-label>two</ion-label>
</ion-item>
<ion-item>
<ion-label>three</ion-label>
</ion-item>
</ion-list>
</ion-accordion>

</ion-accordion-group>

在这种情况下是Accordion"；颜色"；以及"；数字"；扩展。如果您只想从[value]="；[‘颜色’，‘数字’]">