你可以使用ngx-bootstrap中的Collapse组件来隐藏选项卡的内容。以下是一个示例代码:
首先,确保已经安装并导入ngx-bootstrap模块:
import { CollapseModule } from 'ngx-bootstrap/collapse';
然后,在您的组件中使用Collapse组件来隐藏选项卡的内容:
Content of Tab 1
Content of Tab 2
在组件的类中,创建一个变量来跟踪当前活动的选项卡,并创建一个方法来切换选项卡的内容的可见性:
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
activeTab: string = 'tab1';
toggleTabContent(tab: string) {
if (this.activeTab === tab) {
this.activeTab = '';
} else {
this.activeTab = tab;
}
}
}
现在,当用户点击选项卡时,调用toggleTabContent方法来切换选项卡内容的可见性。