Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3709ff2

Browse files
committed
refactor(tabs-2): host bindings, host listeners, cleanup
1 parentc4430bd commit3709ff2

File tree

2 files changed

+32
-31
lines changed

2 files changed

+32
-31
lines changed

‎projects/coreui-angular/src/lib/tabs-2/tab-panel/tab-panel.component.ts

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import { animate, animateChild, AnimationEvent, query, state, style, transition,
22
import{
33
Component,
44
computed,
5-
HostBinding,
6-
HostListener,
75
inject,
86
input,
97
InputSignal,
@@ -27,7 +25,10 @@ type VisibleChangeEvent = { itemKey: string | number; visible: boolean };
2725
'[tabindex]':'visible() ? tabindex(): -1',
2826
'[attr.aria-labelledby]':'attrAriaLabelledBy()',
2927
'[id]':'propId()',
30-
role:'tabpanel'
28+
'[attr.role]':'role()',
29+
'[@.disabled]':'!transition()',
30+
'[@fadeInOut]':'visible() ? "show" : "hide"',
31+
'(@fadeInOut.done)':'onAnimationDone($event)'
3132
},
3233
animations:[
3334
trigger('fadeInOut',[
@@ -64,6 +65,13 @@ export class TabPanelComponent {
6465
*/
6566
readonlyitemKey:InputSignal<string|number>=input.required();
6667

68+
/**
69+
* Element role.
70+
*@type string
71+
*@default 'tabpanel'
72+
*/
73+
readonlyrole:InputSignal<string>=input('tabpanel');
74+
6775
/**
6876
* tabindex attribute.
6977
*@type number
@@ -98,25 +106,17 @@ export class TabPanelComponent {
98106
()=>this.ariaLabelledBy()??`${this.tabsService.id()}-tab-${this.itemKey()}`
99107
);
100108

101-
readonlyhostClasses=computed(()=>({
102-
'tab-pane':true,
103-
active:this.show(),
104-
fade:this.transition(),
105-
show:this.show(),
106-
invisible:this.tabsService.activeItem()?.disabled
107-
})asRecord<string,boolean>);
108-
109-
@HostBinding('@.disabled')
110-
getanimationDisabled():boolean{
111-
return!this.transition();
112-
}
113-
114-
@HostBinding('@fadeInOut')
115-
getanimateType():AnimateType{
116-
returnthis.visible() ?'show' :'hide';
117-
}
109+
readonlyhostClasses=computed(
110+
()=>
111+
({
112+
'tab-pane':true,
113+
active:this.show(),
114+
fade:this.transition(),
115+
show:this.show(),
116+
invisible:this.tabsService.activeItem()?.disabled
117+
})asRecord<string,boolean>
118+
);
118119

119-
@HostListener('@fadeInOut.done',['$event'])
120120
onAnimationDone($event:AnimationEvent):void{
121121
this.show.set(this.visible());
122122
}

‎projects/coreui-angular/src/lib/tabs-2/tabs-list/tabs-list.component.ts

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
contentChildren,
66
DestroyRef,
77
effect,
8-
HostListener,
98
inject,
109
input,
1110
InputSignal,
@@ -19,11 +18,11 @@ import { TabsService } from '../tabs.service';
1918
@Component({
2019
exportAs:'cTabsList',
2120
selector:'c-tabs-list',
22-
imports:[],
2321
template:'<ng-content />',
2422
host:{
2523
'[attr.role]':'role()',
26-
'[class]':'hostClasses()'
24+
'[class]':'hostClasses()',
25+
'(keydown)':'onKeyDown($event)'
2726
}
2827
})
2928
exportclassTabsListComponent{
@@ -50,11 +49,14 @@ export class TabsListComponent {
5049
*/
5150
readonlyrole=input('tablist');
5251

53-
readonlyhostClasses=computed(()=>({
54-
nav:true,
55-
[`nav-${this.layout()}`]:this.layout(),
56-
[`nav-${this.variant()}`]:this.variant()
57-
})asRecord<string,boolean>);
52+
readonlyhostClasses=computed(
53+
()=>
54+
({
55+
nav:true,
56+
[`nav-${this.layout()}`]:this.layout(),
57+
[`nav-${this.variant()}`]:this.variant()
58+
})asRecord<string,boolean>
59+
);
5860

5961
readonlytabs=contentChildren(TabDirective);
6062
#focusKeyManager!:FocusKeyManager<TabDirective>;
@@ -98,8 +100,7 @@ export class TabsListComponent {
98100
this.#focusKeyManager?.updateActiveItem(activeItemIndex<0 ?0 :activeItemIndex);
99101
});
100102

101-
@HostListener('keydown',['$event'])
102-
onKeydown($event:any){
103+
onKeyDown($event:any){
103104
if(['ArrowLeft','ArrowRight'].includes($event.key)){
104105
this.#focusKeyManager.onKeydown($event);
105106
return;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp