我们将我们的应用从v5升级到v6,我们有一个页面,在那里我们显示可展开的项目,我们认为我们将利用新引入的ion-accordion,问题是在页面加载时所有的项目都被折叠,我希望第一个项目展开,而所有其他项目都关闭。有什么属性我可以设置ion-accordion来实现这一点吗?
ion-accordion
vnzz0bqm1#
在浏览了官方文档之后,我发现可以使用ion-accordion-group标记上的value属性默认展开一个项目。
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中的值。
hsgswve42#
如果使用可折叠面板的名称设置的值,则默认值将是所提到的可折叠面板“已展开”
<!-- 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>
在这种情况下,可折叠“颜色”和“数字”是扩展的。如果你只想要第一个,请删除数字***[值]="['colors','numbers']"***
2条答案
按热度按时间vnzz0bqm1#
在浏览了官方文档之后,我发现可以使用
ion-accordion-group
标记上的value
属性默认展开一个项目。请注意,
ion-accordion
中的值等于ion-accordion-group
中的值。hsgswve42#
如果使用可折叠面板的名称设置的值,则默认值将是所提到的可折叠面板“已展开”
在这种情况下,可折叠“颜色”和“数字”是扩展的。如果你只想要第一个,请删除数字***[值]="['colors','numbers']"***