Skip to content

Commit 6f82358

Browse files
fengtianzefengtianze
committed
feat: new accordion design
1 parent bb5d08e commit 6f82358

20 files changed

+286
-189
lines changed

‎.changeset/red-falcons-float.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@alauda/ui": minor
3+
---
4+
5+
feat: new accordion design

‎src/accordion/README.md

+3-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22

33
## Attributes
44

5-
| 参数 | 说明 | 类型 | 默认值 |
6-
| -------------- | -------------- | -------------------- | ------ |
7-
| multi | 可同时展开多个 | boolean | false |
8-
| togglePosition | toggle 的位置 | string(可选 'right') | '' |
5+
| 参数 | 说明 | 类型 | 默认值 |
6+
| ----- | -------------- | ------- | ------ |
7+
| multi | 可同时展开多个 | boolean | false |
98

109
## Events
1110

‎src/accordion/accordion-item/accordion-item.component.html

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
<div class="aui-accordion-item">
2-
<div
3-
class="aui-accordion-item__header"
4-
[class.aui-accordion-item__header-toggle--right]="
5-
togglePosition === 'right'
6-
"
7-
(click)="toggle()"
8-
>
9-
<aui-icon
10-
*ngIf="!hideToggle"
11-
[class.aui-accordion-item__header-toggle--expanded]="expanded"
12-
class="aui-accordion-item__header-toggle"
13-
icon="angle_right"
14-
></aui-icon>
2+
<div class="aui-accordion-item__header">
3+
<button
4+
type="button"
5+
class="aui-accordion-item__expand-button"
6+
[class.isExpanded]="expanded"
7+
[disabled]="disabled"
8+
(click)="toggle()"
9+
>
10+
<aui-icon icon="angle_right"></aui-icon>
11+
</button>
1512
<div
1613
class="aui-accordion-item__header-content"
1714
[class.aui-accordion-item__header-content--expanded]="expanded"
1815
>
1916
<ng-content select="[auiAccordionItemHeader]"></ng-content>
2017
</div>
2118
</div>
22-
<div class="aui-accordion-item__content" role="region" [id]="id">
23-
<div class="aui-accordion-item__content-body" [hidden]="!expanded">
19+
<div
20+
*ngIf="expanded"
21+
class="aui-accordion-item__body"
22+
[id]="id"
23+
[@expand]="expanded ? 'expanded' : 'collapsed'"
24+
>
25+
<div class="aui-accordion-item__content" [class.hasBackground]="background">
2426
<ng-content></ng-content>
2527
<ng-template [ngTemplateOutlet]="lazyContentTpl"></ng-template>
2628
</div>

‎src/accordion/accordion-item/accordion-item.component.scss

+44-21
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,56 @@
11
@import '../../theme/var';
22
@import '../../theme/mixin';
33

4-
$b: aui-accordion-item;
5-
6-
.#{$b} {
4+
.aui-accordion-item {
75
display: block;
8-
border-top: 1px solid $card-border-color;
9-
box-sizing: content-box;
6+
padding: 20px;
7+
border: 1px solid get-color(n-8);
8+
border-radius: get-size(border-radius-l);
9+
background-color: get-color(n-10);
10+
11+
&__expand-button {
12+
@include expand-button;
13+
14+
&:first-child {
15+
margin-right: 20px;
16+
}
17+
18+
&:last-child {
19+
margin-left: 20px;
20+
}
21+
}
1022

1123
&__header {
12-
width: 100%;
1324
display: inline-flex;
14-
flex-direction: row;
1525
align-items: center;
26+
width: 100%;
27+
@include text-set(m);
28+
29+
color: get-text-color(main);
30+
31+
&-content {
32+
max-width: 100%;
33+
@include text-overflow;
34+
}
35+
}
36+
37+
&__body {
38+
border-radius: get-size(border-radius-l);
39+
overflow: hidden;
40+
}
41+
42+
&__content {
43+
margin-top: 16px;
44+
border-radius: get-size(border-radius-l);
1645
overflow: hidden;
17-
padding: $accordion-item-header-padding;
18-
cursor: pointer;
19-
20-
&-toggle {
21-
color: $accordion-item-header-color;
22-
background: transparent;
23-
font-size: get-size(font-size-l);
24-
&--expanded {
25-
transform: rotate(90deg);
26-
}
27-
&--right {
28-
flex-direction: row-reverse;
29-
justify-content: space-between;
30-
}
46+
47+
&.hasBackground {
48+
padding: 16px;
49+
background-color: get-color(n-9);
3150
}
3251
}
3352
}
53+
54+
aui-accordion-item + aui-accordion-item .aui-accordion-item {
55+
margin-top: get-size(spacing-m);
56+
}

‎src/accordion/accordion-item/accordion-item.component.ts

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
import {
2+
animate,
3+
state,
4+
style,
5+
transition,
6+
trigger,
7+
} from '@angular/animations';
18
import { CdkAccordionItem } from '@angular/cdk/accordion';
29
import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
310
import {
@@ -7,9 +14,7 @@ import {
714
Component,
815
ContentChild,
916
Directive,
10-
EventEmitter,
1117
Input,
12-
Output,
1318
TemplateRef,
1419
ViewEncapsulation,
1520
} from '@angular/core';
@@ -32,19 +37,20 @@ export class AccordionItemContentDirective {}
3237
changeDetection: ChangeDetectionStrategy.OnPush,
3338
encapsulation: ViewEncapsulation.None,
3439
preserveWhitespaces: false,
40+
animations: [
41+
trigger('expand', [
42+
state('*', style({ height: 0 })),
43+
state('expanded', style({ height: '*' })),
44+
transition('* <=> expanded', [animate('0.1s ease-in-out')]),
45+
]),
46+
],
3547
viewProviders: [AccordionItemComponent],
3648
})
3749
export class AccordionItemComponent
3850
extends CdkAccordionItem
3951
implements AfterContentInit {
4052
@Input()
41-
hideToggle = false;
42-
43-
@Input()
44-
togglePosition: 'left' | 'right' = 'left';
45-
46-
@Output()
47-
expandedChange = new EventEmitter<boolean>();
53+
background = true;
4854

4955
@ContentChild(AccordionItemContentDirective, {
5056
read: TemplateRef,
@@ -77,9 +83,4 @@ export class AccordionItemComponent
7783
});
7884
}
7985
}
80-
81-
toggle() {
82-
super.toggle();
83-
this.expandedChange.emit(this.expanded);
84-
}
8586
}

‎src/accordion/accordion.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="aui-accordion" [class.hasBg]="background">
2+
<ng-content></ng-content>
3+
</div>

‎src/accordion/accordion.component.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '../theme/var';
2+
3+
.aui-accordion.hasBg {
4+
padding: $table-padding;
5+
border-radius: get-size(border-radius-l);
6+
background-color: get-color(n-9);
7+
}
8+
9+
aui-accordion + aui-accordion .aui-accordion {
10+
margin-top: get-size(spacing-xl);
11+
}

‎src/accordion/accordion.component.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('AccordionComponent', () => {
1919
it('should render correct construction', () => {
2020
fixture.detectChanges();
2121
const accordionItemHeaderEl = fixture.debugElement.query(
22-
By.css('.aui-accordion-item__header-toggle'),
22+
By.css('.aui-accordion-item__expand-button'),
2323
).nativeElement as HTMLElement;
2424
expect(accordionItemHeaderEl).not.toBeNull();
2525
expect(
@@ -35,10 +35,10 @@ describe('AccordionComponent', () => {
3535
accordionItemHeaderEl.dispatchEvent(new Event('click'));
3636

3737
fixture.detectChanges();
38-
const accordionContentBodyEl = fixture.debugElement.query(
39-
By.css('.aui-accordion-item__content-body'),
40-
).nativeElement as HTMLElement;
41-
expect(accordionContentBodyEl.hidden).toBeFalsy();
38+
const accordionContentBody = fixture.debugElement.query(
39+
By.css('.aui-accordion-item__content'),
40+
);
41+
expect(accordionContentBody).toBeFalsy();
4242
});
4343
});
4444

‎src/accordion/accordion.component.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,24 @@ import {
33
ChangeDetectionStrategy,
44
Component,
55
HostBinding,
6+
Input,
67
Optional,
78
SkipSelf,
89
ViewEncapsulation,
910
} from '@angular/core';
1011

1112
@Component({
1213
selector: 'aui-accordion',
13-
template: `<ng-content></ng-content>`,
14+
templateUrl: './accordion.component.html',
15+
styleUrls: ['./accordion.component.scss'],
1416
encapsulation: ViewEncapsulation.None,
1517
changeDetection: ChangeDetectionStrategy.OnPush,
1618
preserveWhitespaces: false,
1719
})
1820
export class AccordionComponent extends CdkAccordion {
21+
@Input()
22+
background = true;
23+
1924
@HostBinding('attr.accordion-depth')
2025
depth: number;
2126

‎src/table/table-cell.component.ts

+46-35
Original file line numberDiff line numberDiff line change
@@ -16,58 +16,69 @@ import {
1616
} from '@angular/core';
1717

1818
@Component({
19-
selector: 'aui-table-cell[expand]',
19+
selector: 'aui-table-cell[auiExpandButton]',
2020
template: `
21-
<ng-container *ngIf="!template">
22-
<button
23-
type="button"
24-
(click)="expandChange.next()"
25-
class="aui-table__cell-expand-button"
26-
[class.expanded]="expand"
27-
[class.collapsed]="!expand"
28-
[disabled]="disabled"
29-
aui-button="primary"
30-
size="mini"
31-
[square]="true"
32-
[round]="true"
33-
>
34-
<aui-icon [icon]="expand ? 'angle_down' : 'angle_right'"></aui-icon>
35-
</button>
36-
</ng-container>
21+
<button
22+
type="button"
23+
class="aui-expand-button"
24+
[class.isExpanded]="expand"
25+
[disabled]="disabled"
26+
(click)="expandChange.next()"
27+
>
28+
<aui-icon icon="angle_right"></aui-icon>
29+
</button>
30+
`,
31+
changeDetection: ChangeDetectionStrategy.OnPush,
32+
encapsulation: ViewEncapsulation.None,
33+
preserveWhitespaces: false,
34+
})
35+
export class TableExpandButtonCellComponent extends CdkCell {
36+
@Input()
37+
expand = false;
38+
39+
@Input()
40+
disabled = false;
41+
42+
@Output()
43+
expandChange = new EventEmitter();
3744

38-
<ng-container *ngIf="expand && template">
39-
<div class="aui-table__cell-expand-detail" [@expand]="expanded">
45+
get expanded() {
46+
return this.expand ? 'expanded' : null;
47+
}
48+
}
49+
@Component({
50+
selector: 'aui-table-cell[auiExpandPanel]',
51+
template: `
52+
<div
53+
*ngIf="expand"
54+
class="aui-table__cell-expand-panel"
55+
[@expand]="expanded"
56+
>
57+
<div
58+
class="aui-table__cell-expand-panel-content"
59+
[class.hasBackground]="background"
60+
>
4061
<ng-content></ng-content>
4162
</div>
42-
</ng-container>
63+
</div>
4364
`,
4465
changeDetection: ChangeDetectionStrategy.OnPush,
4566
encapsulation: ViewEncapsulation.None,
46-
exportAs: 'auiTableCell',
4767
preserveWhitespaces: false,
4868
animations: [
4969
trigger('expand', [
50-
state('*', style({ height: 0, padding: '0 16px' })),
51-
state(
52-
'expanded',
53-
style({ height: '*', 'margin-bottom': '15px', padding: '16px' }),
54-
),
55-
transition('* <=> expanded', [animate(250)]),
70+
state('*', style({ height: 0 })),
71+
state('expanded', style({ height: '*', 'margin-bottom': '16px' })),
72+
transition('* <=> expanded', [animate('0.1s ease-in-out')]),
5673
]),
5774
],
5875
})
59-
export class TableCellComponent extends CdkCell {
76+
export class TableExpandPanelCellComponent extends CdkCell {
6077
@Input()
6178
expand = false;
6279

6380
@Input()
64-
disabled = false;
65-
66-
@Input()
67-
template: boolean;
68-
69-
@Output()
70-
expandChange = new EventEmitter();
81+
background = true;
7182

7283
get expanded() {
7384
return this.expand ? 'expanded' : null;

0 commit comments

Comments
 (0)