- 首页
- 其他开发
- 如何将 Bootstrap Accordion 添加到 Angular 应用程序
如何将 Bootstrap Accordion 添加到 Angular 应用程序
[英] How to add Bootstrap Accordion to Angular app
本文介绍了如何将 Bootstrap Accordion 添加到 Angular 应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将 Bootstrap Accordion 添加到下面的 Angular 应用程序中:
<div class="card"><div class="card-header" id="headingOne"><h5 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">可折叠组项目 #1
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"><div class="card-body">动画
<div class="card"><div class="card-header" id="headingTwo"><h5 class="mb-0"><button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">可折叠组项目 #2
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"><div class="card-body">动画
<div class="card"><div class="card-header" id="headingThree"><h5 class="mb-0"><button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">可折叠组项目#
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"><div class="card-body">动画
我在构建之前运行了以下 NPM 安装:
<块引用>npm 我引导
npm 和 ngx-bootstrap
但是当我点击其中一个手风琴标题时，什么也没有发生.有人可以告诉我我缺少什么设置吗?非常感谢！
解决方案
您正在使用引导程序的普通"版本.
确保您已在全局 styles.css 或 style.scss 文件中将引导程序样式添加到您的应用程序:
CSS 版本
@import '~bootstrap/dist/css/bootstrap.min.css';
SCSS 版本
@import "~bootstrap/scss/bootstrap";
将 AccordionModule 从 ngx-bootstrap 导入您的 AppModule.
import { AccordionModule } from 'ngx-bootstrap/accordion';@NgModule({进口:[AccordionModule.forRoot(),...]})导出类 AppModule{}
使用 ngx-bootstrap 中可用的组件，而不是普通"的 html 版本:
<accordion-group 标题="静态标题">此内容直接在模板中.</accordion-group><accordion-group Heading="另一组"><p>一些内容</p></accordion-group><accordion-group Heading="另一组"><p>一些内容</p></accordion-group><accordion-group Heading="另一组"><p>一些内容</p></accordion-group></手风琴>
ngx-bootstrap 安装说明
ngx-bootstrap 的手风琴组件
添加动画
要添加动画，您需要将属性isAnimated 添加到父组件accordion:
<!-- ... --></手风琴>
只打开一个手风琴
要只打开一个手风琴，您需要将属性 closeOthers 添加到父组件 accordion:
<!-- ... --></手风琴>
I'm trying to add an Bootstrap Accordion to my Angular app below:
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim
</div>
</div>
</div>
</div>
I ran the following NPM installations before building:
npm i bootstrap
npm i ngx-bootstrap
But when I click on one of the Accordion Titles, nothing is happening.
Can someone please tell me what piece of the set up I'm missing? Thanks a lot!
解决方案
You are using the "plain" version of bootstrap.
Assure that you have added the bootstrap styling to your application in your global styles.css or style.scss file:
CSS Version
@import '~bootstrap/dist/css/bootstrap.min.css';
SCSS Version
@import "~bootstrap/scss/bootstrap";
Import the AccordionModule from ngx-bootstrap to your AppModule.
import { AccordionModule } from 'ngx-bootstrap/accordion';
@NgModule({
imports: [AccordionModule.forRoot(),...]
})
export class AppModule{}
Use the component available in ngx-bootstrap not the "plain" html version:
<accordion>
<accordion-group heading="Static Header">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Another group">
<p>Some content</p>
</accordion-group>
<accordion-group heading="Another group">
<p>Some content</p>
</accordion-group>
<accordion-group heading="Another group">
<p>Some content</p>
</accordion-group>
</accordion>
Install instructions for ngx-bootstrap
Accordion Component of ngx-bootstrap
Add animation
To add an animation you need to add the property isAnimated to the parent component accordion:
<accordion [isAnimated]="true">
<!-- ... -->
</accordion>
Open only one accordion
To open only one accordion you need to add the property closeOthers to the parent component accordion:
<accordion [isAnimated]="true" [closeOthers]="true">
<!-- ... -->
</accordion>
这篇关于如何将 Bootstrap Accordion 添加到 Angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
