Ionic v6 Ion-accordion 默认打开第一项

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>

在这种情况下，手风琴“颜色”和“数字”被扩展。 如果您只想要第一个，请从[value]="['colors', 'numbers']"中删除数字