【Angular2】手风琴样式页面制作

最新推荐文章于 2024-09-22 20:36:19 发布

原创

最新推荐文章于 2024-09-22 20:36:19 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Angular2项目中利用bootstrap的accordion组件创建手风琴样式页面。从引入扩展包到配置module、html、css、component.ts和service.ts文件，详细展示了代码实现过程，并提供了页面展开与合上的效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前言】

　　新生页面里面有一个公约，是手风琴样式的页面。这种样式比较美观，也能节省页面空间。关于手风琴样式页面的制作方式，和大家分享一下~

一、实现思路：

引用bootstrap样式中的accordion组件实现。

二、代码实现：

1、module文件：

引入手风琴扩展包：

import { AccordionModule } from 'ngx-bootstrap/accordion';

2、html文件：

<div class="container">
  <!-- 只显示一条公约 -->
  <accordion (ngModel)="oneAtATime" [closeOthers]="oneAtATime">
    <accordion-group #group *ngFor="let convention of conventionList">
      <div accordion-heading class="customClass">
        {
  
  {convention.conventionName}}
        <!-- 加上>符号 -->
        <i class="pull-right float-xs-right glyphicon" [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
      </div>
      &l