[英]Ionic v6 Ion-accordion open first item by default
We upgraded our app from v5 to v6, we have a page where we are displaying expandable items and we thought we would make use of the newly introduced ion-accordion
, the problem is on page load all the items are collapsed, I want the first item expanded while all the other items are closed.我们将我们的应用程序从 v5 升级到 v6,我们有一个显示可扩展项目的页面,我们认为我们会利用新引入的ion-accordion
,问题是页面加载时所有项目都折叠了,我想要第一个项目展开,而所有其他项目都关闭。 Are there any attributes I can set on ion-accordion
to achieve this?我可以在ion-accordion
上设置任何属性来实现这一点吗?
After going through the official documentation I just found that you can have an item expanded by default using the value
attribute on ion-accordion-group
tag.在浏览了官方文档后,我发现你可以使用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>
Note the value in ion-accordion
is equal to that in ion-accordion-group
.请注意ion-accordion
中的值等于ion-accordion-group
中的值。
if you set the value for with the name of the accordion the default will be the mentioned accordion Expanded如果您使用手风琴的名称设置值,则默认将是提到的手风琴展开
<!-- 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>
in this case Accordion "Colors" and "Numbers" are Expanded.在这种情况下,手风琴“颜色”和“数字”被扩展。 if you want only the first one delete numbers from [value]="['colors', 'numbers']"如果您只想要第一个,请从[value]="['colors', 'numbers']"中删除数字
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.