Skip to content

Commit 93e101a

Browse files
xidedixxidedix
committed
refactor(tabs): update to the latest api
1 parent b491ca0 commit 93e101a

File tree

2 files changed

+93
-91
lines changed

2 files changed

+93
-91
lines changed

Diff for: ‎src/app/views/base/tabs/tabs.component.html

+67-78
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,39 @@
55
<strong>Angular Tabs</strong> <small>underline</small>
66
</c-card-header>
77
<c-card-body>
8-
<c-nav variant="underline-border" role="tablist">
9-
<c-nav-item>
10-
<button [cTabContent]="tabContent1" [tabPaneIdx]="0" cNavLink >
8+
<c-tabs [activeItemKey]="0" (activeItemKeyChange)="handleActiveItemChange($event)">
9+
<c-tabs-list variant="underline-border">
10+
<button cTab [itemKey]="0">
1111
<svg cIcon class="me-2" name="cilHome"></svg>
1212
Home
1313
</button>
14-
</c-nav-item>
15-
<c-nav-item>
16-
<button [cTabContent]="tabContent1" [tabPaneIdx]="1" cNavLink >
14+
<button cTab [itemKey]="1">
1715
<svg cIcon class="me-2" name="cilUser"></svg>
1816
Profile
1917
</button>
20-
</c-nav-item>
21-
<c-nav-item>
22-
<button [cTabContent]="tabContent1" [tabPaneIdx]="2" cNavLink
23-
[disabled]="tabContent1.activeTabPaneIdx < 1" >
18+
<button cTab [itemKey]="2" [disabled]="activeItem()===0">
2419
<svg cIcon class="me-2" name="cilCode"></svg>
2520
Contact
2621
</button>
27-
</c-nav-item>
28-
</c-nav>
29-
<c-tab-content #tabContent1="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
30-
<c-tab-pane class="p-3 preview" >
31-
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
32-
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
33-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
34-
</c-tab-pane>
35-
<c-tab-pane class="p-3 preview" >
36-
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
37-
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
38-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
39-
</c-tab-pane>
40-
@if (tabContent1.activeTabPaneIdx > 0) {
41-
<c-tab-pane class="p-3 preview" >
42-
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
43-
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
44-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
45-
</c-tab-pane>
46-
}
47-
</c-tab-content>
22+
</c-tabs-list>
23+
<c-tabs-content>
24+
<c-tab-panel [itemKey]="0" class="p-3">
25+
This is some placeholder content the <strong class="text-info">Home</strong> tab's associated content. Clicking another tab
26+
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
27+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
28+
</c-tab-panel>
29+
<c-tab-panel [itemKey]="1" class="p-3">
30+
This is some placeholder content the <strong class="text-success">Profile</strong> tab's associated content. Clicking another
31+
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
32+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
33+
</c-tab-panel>
34+
<c-tab-panel [itemKey]="2" class="p-3">
35+
This is some placeholder content the <strong class="text-warning">Contact</strong> tab's associated content. Clicking another
36+
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
37+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
38+
</c-tab-panel>
39+
</c-tabs-content>
40+
</c-tabs>
4841
</c-card-body>
4942
</c-card>
5043
</c-col>
@@ -54,26 +47,26 @@
5447
<strong>Angular Tabs</strong> <small>tabs</small>
5548
</c-card-header>
5649
<c-card-body>
57-
<c-nav variant="tabs" role="tablist">
58-
@for (nav of panes; track nav; let i = $index, isLast = $last) {
59-
<c-nav-item>
60-
<button [cTabContent]="tabContent2" [disabled]="isLast" [tabPaneIdx]="i" cNavLink >
61-
<svg cIcon class="me-2" [name]="nav.icon"></svg>
62-
{{ nav.name }}
50+
<c-tabs [activeItemKey]="0">
51+
<c-tabs-list variant="tabs">
52+
@for (tab of panes; track i; let i = $index, isLast = $last) {
53+
<button cTab [itemKey]="i" [disabled]="isLast">
54+
<svg cIcon class="me-2" [name]="tab.icon"></svg>
55+
{{ tab.name }}
6356
</button>
64-
</c-nav-item>
65-
}
66-
</c-nav>
67-
<c-tab-content #tabContent2="cTabContent" [activeTabPaneIdx]="0" cRounded="bottom">
68-
@for (pane of panes; track pane; let i = $index) {
69-
<c-tab-pane class="p-3 preview" >
70-
This is some placeholder content the <strong>{{ pane.name }}</strong> tab's associated content. Clicking
71-
another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
72-
control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
73-
navigation.
74-
</c-tab-pane>
75-
}
76-
</c-tab-content>
57+
}
58+
</c-tabs-list>
59+
<c-tabs-content>
60+
@for (pane of panes; track i; let i = $index) {
61+
<c-tab-panel class="p-3 preview" [itemKey]="i" cRounded="bottom">
62+
This is some placeholder content the <strong>{{ pane.name }}</strong> tab's associated content. Clicking
63+
another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
64+
control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered
65+
navigation.
66+
</c-tab-panel>
67+
}
68+
</c-tabs-content>
69+
</c-tabs>
7770
</c-card-body>
7871
</c-card>
7972
</c-col>
@@ -83,43 +76,39 @@
8376
<strong>Angular Tabs</strong> <small>pills</small>
8477
</c-card-header>
8578
<c-card-body>
86-
<c-nav variant="pills" role="tablist">
87-
<c-nav-item>
88-
<button [cTabContent]="tabContent3" [tabPaneIdx]="0" cNavLink >
79+
<c-tabs>
80+
<c-tabs-list variant="pills">
81+
<button cTab [itemKey]="0">
8982
<svg cIcon class="me-2" name="cilHome"></svg>
9083
Home
9184
</button>
92-
</c-nav-item>
93-
<c-nav-item>
94-
<button [cTabContent]="tabContent3" [tabPaneIdx]="1" cNavLink >
85+
<button cTab [itemKey]="1">
9586
<svg cIcon class="me-2" name="cilUser"></svg>
9687
Profile
9788
</button>
98-
</c-nav-item>
99-
<c-nav-item>
100-
<button [cTabContent]="tabContent3" [tabPaneIdx]="2" cNavLink >
89+
<button cTab [itemKey]="2">
10190
<svg cIcon class="me-2" name="cilCode"></svg>
10291
Contact
10392
</button>
104-
</c-nav-item>
105-
</c-nav>
106-
<c-tab-content #tabContent3="cTabContent" cRounded="bottom" [activeTabPaneIdx]="0">
107-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
108-
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
109-
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
110-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
111-
</c-tab-pane>
112-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
113-
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
114-
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
115-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
116-
</c-tab-pane>
117-
<c-tab-pane aria-labelledby="docs-code-preview" class="p-3 preview" >
118-
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
119-
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
120-
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
121-
</c-tab-pane>
122-
</c-tab-content>
93+
</c-tabs-list>
94+
<c-tabs-content>
95+
<c-tab-panel [itemKey]="0" class="p-3">
96+
This is some placeholder content the <strong>Home</strong> tab's associated content. Clicking another tab
97+
will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
98+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
99+
</c-tab-panel>
100+
<c-tab-panel [itemKey]="1" class="p-3">
101+
This is some placeholder content the <strong>Profile</strong> tab's associated content. Clicking another
102+
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
103+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
104+
</c-tab-panel>
105+
<c-tab-panel [itemKey]="2" class="p-3">
106+
This is some placeholder content the <strong>Contact</strong> tab's associated content. Clicking another
107+
tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the
108+
content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
109+
</c-tab-panel>
110+
</c-tabs-content>
111+
</c-tabs>
123112
</c-card-body>
124113
</c-card>
125114
</c-col>

Diff for: ‎src/app/views/base/tabs/tabs.component.ts

+26-13
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,50 @@
1-
import { Component } from '@angular/core';
2-
import { IconDirective } from '@coreui/icons-angular';
3-
import { RouterLink } from '@angular/router';
1+
import { Component, signal } from '@angular/core';
42
import {
53
CardBodyComponent,
64
CardComponent,
75
CardHeaderComponent,
86
ColComponent,
9-
NavComponent,
10-
NavItemComponent,
11-
NavLinkDirective,
127
RoundedDirective,
138
RowComponent,
14-
TabContentComponent,
15-
TabContentRefDirective,
16-
TabPaneComponent,
17-
TextColorDirective
9+
TabDirective,
10+
TabPanelComponent,
11+
TabsComponent,
12+
TabsContentComponent,
13+
TabsListComponent
1814
} from '@coreui/angular';
15+
import { IconDirective } from '@coreui/icons-angular';
1916

2017
@Component({
2118
selector: 'app-tabs',
2219
templateUrl: './tabs.component.html',
2320
styleUrls: ['./tabs.component.scss'],
2421
standalone: true,
25-
imports: [RowComponent, ColComponent, TextColorDirective, CardComponent, CardHeaderComponent, CardBodyComponent, NavComponent, NavItemComponent, NavLinkDirective, TabContentRefDirective, RouterLink, IconDirective, TabContentComponent, RoundedDirective, TabPaneComponent]
22+
imports: [
23+
CardBodyComponent,
24+
CardComponent,
25+
CardHeaderComponent,
26+
ColComponent,
27+
RoundedDirective,
28+
RowComponent,
29+
TabDirective,
30+
TabPanelComponent,
31+
TabsComponent,
32+
TabsContentComponent,
33+
TabsListComponent,
34+
IconDirective
35+
]
2636
})
27-
export class TabsComponent {
37+
export class AppTabsComponent {
2838

2939
public panes = [
3040
{ name: 'Home 01', id: 'tab-01', icon: 'cilHome' },
3141
{ name: 'Profile 02', id: 'tab-02', icon: 'cilUser' },
3242
{ name: 'Contact 03', id: 'tab-03', icon: 'cilCode' }
3343
];
3444

35-
constructor() { }
45+
activeItem = signal(0);
3646

47+
handleActiveItemChange(value: string | number | undefined) {
48+
this.activeItem.set(<number>value);
49+
}
3750
}

0 commit comments

Comments
 (0)