[英]How to style ng-bootstrap accordion?
I want to add custom fade styling to accordion of ng-bootstrap!我想为 ng-bootstrap 的手风琴添加自定义淡入淡出样式! How can I achieve it?我怎样才能实现它?
Following Solution is for ng-bootstrap version 5.xx & 6.xx & Angular 8 & 9以下解决方案适用于 ng-bootstrap 版本 5.xx & 6.xx & Angular 8 & 9
Fade style won't apply if the content of accordion gets removed from the DOM , So, You need to add [destroyOnHide]='false' along with ngb-accordion selector.如果手风琴的内容从 DOM 中删除,则淡入淡出样式将不适用,因此,您需要添加[destroyOnHide]='false'以及ngb -accordion选择器。 Now, Content won't get removed from DOM when content gets hidden.现在,当内容被隐藏时,内容不会从 DOM 中删除。
accordion.component.html:手风琴.component.html:
<div class="card">
<div class="card-body">
<!-- ngb Accordion starts -->
<ngb-accordion [destroyOnHide]='false' [closeOthers]="true" activeIds="panel1">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<span>Accordion Item 1 </span>
</ng-template>
<ng-template ngbPanelContent>
Donut caramels sweet roll bonbo
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelTitle>
<span>Accordion Item 2 </span>
</ng-template>
<ng-template ngbPanelContent>
tootsie roll sweet gummi bears chocolate bar.
</ng-template>
</ngb-panel>
<ngb-panel id="panel3">
<ng-template ngbPanelTitle>
<span>Accordion Item 3 </span>
</ng-template>
<ng-template ngbPanelContent>
tootsie roll sweet gummi bears chocolate bar.
</ng-template>
</ngb-panel>
<ngb-panel id="panel4" [disabled]="true">
<ng-template ngbPanelTitle>
<span>Accordion Item 4 </span>
</ng-template>
<ng-template ngbPanelContent>
gummi bears jujubes cotton candy cake marshmallow. Tart cake danish dessert
</ng-template>
</ngb-panel>
</ngb-accordion>
<!-- ngb Accordion ends -->
</div>
</div>
accordion.component.scss :手风琴.component.scss:
// collapse toggle
::ng-deep .collapse {
transition: max-height .55s, opacity .35s ease-in-out;
max-height: 0;
opacity: 0;
display: block !important;
&.show {
max-height: 100rem;
opacity: 1;
}
}
::ng-deep .accordion {
.card {
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
.card-header {
// padding-top: 0;
padding: 0;
button {
padding: 1.2rem;
width: 100%;
span {
float: left;
font-size: 1.2rem;
}
}
}
.card-body {
padding: 1rem;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.