- Ngx-Bootstrap 教程
- Ngx-Bootstrap - 主页
- Ngx-Bootstrap - 概述
- Ngx-Bootstrap - 环境设置
- Ngx-Bootstrap - 手风琴
- Ngx-Bootstrap - 警报
- Ngx-Bootstrap - 按钮
- Ngx-Bootstrap - 轮播
- Ngx-Bootstrap - 折叠
- Ngx-Bootstrap - DatePicker
- Ngx-Bootstrap - 下拉菜单
- Ngx-Bootstrap - 模态框
- Ngx-Bootstrap - 分页
- Ngx-Bootstrap - 弹出窗口
- Ngx-Bootstrap - 进度条
- Ngx-Bootstrap - 评级
- Ngx-Bootstrap - 可排序
- Ngx-Bootstrap - 选项卡
- Ngx-Bootstrap - 时间选择器
- Ngx-Bootstrap - 工具提示
- Ngx-Bootstrap - Typeahead
- Ngx-Bootstrap 有用资源
- Ngx-Bootstrap - 快速指南
- Ngx-Bootstrap - 有用的资源
- Ngx-Bootstrap - 讨论
Ngx-Bootstrap - 手风琴
Accordion 是一个显示可折叠面板的控件,用于在有限的空间内显示信息。
手风琴组件
显示可折叠的内容面板,以便在有限的空间内呈现信息。
选择器
手风琴
输入
closeOthers - 布尔值,如果为 true,则展开一项将关闭所有其他项
isAnimated - 布尔值,打开/关闭动画,默认值:false
AccordionPanel组件
手风琴标题
您可以在组内任何将用作组标题模板的元素上使用 Accordion-heading 属性,而不是在折叠组上使用标题属性。
选择器
手风琴组、手风琴面板
输入
header - 字符串,手风琴组标题中的可点击文本
isDisabled - 布尔值,启用/禁用手风琴组
isOpen - 布尔值,手风琴组是打开还是关闭。该属性支持双向绑定
panelClass - 字符串,提供使用 Bootstrap 上下文面板类(面板主、面板成功、面板信息等)的能力。
输出
isOpenChange - 打开状态更改时发出
手风琴配置
配置服务,为 AccordionComponent 提供默认值。
特性
closeOthers - 布尔值,打开面板时是否应关闭其他面板。默认值:假
isAnimated - 布尔值,打开/关闭动画
例子
由于我们将使用 Accordion,因此我们更新了 app.module.ts 以使用AccordionModule,如ngx-bootstrap 环境设置章节中所示。
更新 test.component.html 以使用手风琴。
测试.component.html
<accordion> <accordion-group heading="Open By Default" [isOpen]="open"> <p>Open By Default</p> </accordion-group> <accordion-group heading="Disabled" [isDisabled]="disabled"> <p>Disabled</p> </accordion-group> <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)"> <p>Open Event</p> </accordion-group> </accordion>
更新 test.component.ts 中相应的变量和方法。
测试组件.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { open: boolean = true; disabled: boolean = true; constructor() { } ngOnInit(): void { } log(isOpened: boolean){ console.log(isOpened); } }
构建和服务
运行以下命令启动角度服务器。
ng serve
服务器启动并运行后。打开 http://localhost:4200 并验证以下输出。