Angular手风琴是一种常见的UI组件,通常用于在页面上显示可折叠的内容区域。当用户点击手风琴的标题时,内容区域会展开或折叠。
下面是一个简单的Angular手风琴示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['./accordion.component.css']
})
export class AccordionComponent {
isCollapsed = true;
}
Title
Content
.accordion {
border: 1px solid #ccc;
margin-bottom: 10px;
}
.accordion-header {
background-color: #f5f5f5;
padding: 10px;
cursor: pointer;
}
.accordion-content {
padding: 10px;
}
以上代码示例演示了一个简单的手风琴效果,点击标题时,内容区域会展开或折叠,同时标题旁边的图标也会相应改变。
你可以根据自己的需求和设计样式来修改这个示例,并添加更多的手风琴项。
上一篇:Angular手风琴可访问性问题
下一篇:Angular授权