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']"中刪除數字