Skip to content

Commit 9bcce6c

Browse files
HyperLife1119HyperLife1119
authored
fix(module:slider): fix the style of markers in vertical mode (#8494)
1 parent 31b90fa commit 9bcce6c

File tree

6 files changed

+93
-92
lines changed

6 files changed

+93
-92
lines changed

‎components/slider/marks.component.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,19 @@ import { NzDisplayedMark, NzExtendedMark, NzMark, NzMarkObj } from './typings';
1818
selector: 'nz-slider-marks',
1919
exportAs: 'nzSliderMarks',
2020
template: `
21-
<div class="ant-slider-mark">
22-
<span
23-
class="ant-slider-mark-text"
24-
*ngFor="let attr of marks; trackBy: trackById"
25-
[class.ant-slider-mark-active]="attr.active"
26-
[ngStyle]="attr.style!"
27-
[innerHTML]="attr.label"
28-
></span>
29-
</div>
21+
<span
22+
class="ant-slider-mark-text"
23+
*ngFor="let attr of marks; trackBy: trackById"
24+
[class.ant-slider-mark-active]="attr.active"
25+
[ngStyle]="attr.style!"
26+
[innerHTML]="attr.label"
27+
></span>
3028
`,
3129
imports: [NgStyle, NgForOf],
32-
standalone: true
30+
standalone: true,
31+
host: {
32+
class: 'ant-slider-mark'
33+
}
3334
})
3435
export class NzSliderMarksComponent implements OnChanges {
3536
static ngAcceptInputType_vertical: BooleanInput;

‎components/slider/slider.component.ts‎

Lines changed: 60 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
Component,
1414
ElementRef,
1515
EventEmitter,
16-
forwardRef,
1716
Input,
1817
OnChanges,
1918
OnDestroy,
@@ -23,25 +22,25 @@ import {
2322
QueryList,
2423
SimpleChanges,
2524
TemplateRef,
26-
ViewChild,
2725
ViewChildren,
28-
ViewEncapsulation
26+
ViewEncapsulation,
27+
forwardRef
2928
} from '@angular/core';
3029
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
31-
import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs';
30+
import { Observable, Subject, Subscription, fromEvent, merge } from 'rxjs';
3231
import { distinctUntilChanged, filter, map, takeUntil, tap } from 'rxjs/operators';
3332

3433
import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
3534
import {
35+
InputBoolean,
36+
InputNumber,
37+
MouseTouchObserverConfig,
3638
arraysEqual,
3739
ensureNumberInRange,
3840
getElementOffset,
3941
getPercent,
4042
getPrecision,
41-
InputBoolean,
42-
InputNumber,
4343
isNil,
44-
MouseTouchObserverConfig,
4544
silentEvent
4645
} from 'ng-zorro-antd/core/util';
4746

@@ -66,63 +65,51 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
6665
},
6766
NzSliderService
6867
],
69-
host: {
70-
'(keydown)': 'onKeyDown($event)'
71-
},
7268
template: `
73-
<div
74-
#slider
75-
class="ant-slider"
76-
[class.ant-slider-rtl]="dir === 'rtl'"
77-
[class.ant-slider-disabled]="nzDisabled"
78-
[class.ant-slider-vertical]="nzVertical"
79-
[class.ant-slider-with-marks]="marksArray"
80-
>
81-
<div class="ant-slider-rail"></div>
82-
<nz-slider-track
83-
[vertical]="nzVertical"
84-
[included]="nzIncluded"
85-
[offset]="track.offset!"
86-
[length]="track.length!"
87-
[reverse]="nzReverse"
88-
[dir]="dir"
89-
></nz-slider-track>
90-
<nz-slider-step
91-
*ngIf="marksArray"
92-
[vertical]="nzVertical"
93-
[min]="nzMin"
94-
[max]="nzMax"
95-
[lowerBound]="$any(bounds.lower)"
96-
[upperBound]="$any(bounds.upper)"
97-
[marksArray]="marksArray"
98-
[included]="nzIncluded"
99-
[reverse]="nzReverse"
100-
></nz-slider-step>
101-
<nz-slider-handle
102-
*ngFor="let handle of handles; index as handleIndex"
103-
[vertical]="nzVertical"
104-
[reverse]="nzReverse"
105-
[offset]="handle.offset!"
106-
[value]="handle.value!"
107-
[active]="handle.active"
108-
[tooltipFormatter]="nzTipFormatter"
109-
[tooltipVisible]="nzTooltipVisible"
110-
[tooltipPlacement]="nzTooltipPlacement"
111-
[dir]="dir"
112-
(focusin)="onHandleFocusIn(handleIndex)"
113-
></nz-slider-handle>
114-
<nz-slider-marks
115-
*ngIf="marksArray"
116-
[vertical]="nzVertical"
117-
[min]="nzMin"
118-
[max]="nzMax"
119-
[lowerBound]="$any(bounds.lower)"
120-
[upperBound]="$any(bounds.upper)"
121-
[marksArray]="marksArray"
122-
[included]="nzIncluded"
123-
[reverse]="nzReverse"
124-
></nz-slider-marks>
125-
</div>
69+
<div class="ant-slider-rail"></div>
70+
<nz-slider-track
71+
[vertical]="nzVertical"
72+
[included]="nzIncluded"
73+
[offset]="track.offset!"
74+
[length]="track.length!"
75+
[reverse]="nzReverse"
76+
[dir]="dir"
77+
></nz-slider-track>
78+
<nz-slider-step
79+
*ngIf="marksArray"
80+
[vertical]="nzVertical"
81+
[min]="nzMin"
82+
[max]="nzMax"
83+
[lowerBound]="$any(bounds.lower)"
84+
[upperBound]="$any(bounds.upper)"
85+
[marksArray]="marksArray"
86+
[included]="nzIncluded"
87+
[reverse]="nzReverse"
88+
></nz-slider-step>
89+
<nz-slider-handle
90+
*ngFor="let handle of handles; index as handleIndex"
91+
[vertical]="nzVertical"
92+
[reverse]="nzReverse"
93+
[offset]="handle.offset!"
94+
[value]="handle.value!"
95+
[active]="handle.active"
96+
[tooltipFormatter]="nzTipFormatter"
97+
[tooltipVisible]="nzTooltipVisible"
98+
[tooltipPlacement]="nzTooltipPlacement"
99+
[dir]="dir"
100+
(focusin)="onHandleFocusIn(handleIndex)"
101+
></nz-slider-handle>
102+
<nz-slider-marks
103+
*ngIf="marksArray"
104+
[vertical]="nzVertical"
105+
[min]="nzMin"
106+
[max]="nzMax"
107+
[lowerBound]="$any(bounds.lower)"
108+
[upperBound]="$any(bounds.upper)"
109+
[marksArray]="marksArray"
110+
[included]="nzIncluded"
111+
[reverse]="nzReverse"
112+
></nz-slider-marks>
126113
`,
127114
imports: [
128115
NzSliderTrackComponent,
@@ -132,7 +119,15 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
132119
NzSliderMarksComponent,
133120
NgIf
134121
],
135-
standalone: true
122+
standalone: true,
123+
host: {
124+
class: 'ant-slider',
125+
'[class.ant-slider-rtl]': `dir === 'rtl'`,
126+
'[class.ant-slider-disabled]': 'nzDisabled',
127+
'[class.ant-slider-vertical]': 'nzVertical',
128+
'[class.ant-slider-with-marks]': 'marksArray',
129+
'(keydown)': 'onKeyDown($event)'
130+
}
136131
})
137132
export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
138133
static ngAcceptInputType_nzDisabled: BooleanInput;
@@ -145,7 +140,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
145140
static ngAcceptInputType_nzStep: NumberInput;
146141
static ngAcceptInputType_nzReverse: BooleanInput;
147142

148-
@ViewChild('slider', { static: true }) slider!: ElementRef<HTMLDivElement>;
149143
@ViewChildren(NzSliderHandleComponent) handlerComponents!: QueryList<NzSliderHandleComponent>;
150144

151145
@Input() @InputBoolean() nzDisabled = false;
@@ -185,6 +179,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
185179
private isNzDisableFirstChange = true;
186180

187181
constructor(
182+
public slider: ElementRef<HTMLDivElement>,
188183
private sliderService: NzSliderService,
189184
private cdr: ChangeDetectorRef,
190185
private platform: Platform,

‎components/slider/slider.spec.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -863,17 +863,17 @@ describe('nz-slider', () => {
863863
it('should be disable initially even if nzDisable is set to false', () => {
864864
testComponent.disable();
865865
fixture.detectChanges();
866-
const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild;
866+
const sliderElement = sliderDebugElement.nativeElement;
867867

868-
expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
868+
expect(sliderElement!.classList).toContain('ant-slider-disabled');
869869
expect(sliderInstance.nzDisabled).toBe(true);
870870
});
871871
it('should disable work', () => {
872872
testComponent.disabled = true;
873873
fixture.detectChanges();
874-
const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild;
874+
const sliderElement = sliderDebugElement.nativeElement;
875875

876-
expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
876+
expect(sliderElement!.classList).toContain('ant-slider-disabled');
877877
expect(sliderInstance.nzDisabled).toBe(true);
878878
expect(sliderControl.value).toBe(42);
879879
dispatchClickEventSequence(sliderNativeElement, 0.76);
@@ -882,15 +882,15 @@ describe('nz-slider', () => {
882882

883883
testComponent.enable();
884884
fixture.detectChanges();
885-
expect(firstElementChildSlider!.classList).not.toContain('ant-slider-disabled');
885+
expect(sliderElement!.classList).not.toContain('ant-slider-disabled');
886886
expect(sliderInstance.nzDisabled).toBe(false);
887887
dispatchClickEventSequence(sliderNativeElement, 0.76);
888888
fixture.detectChanges();
889889
expect(sliderControl.value).toBe(76);
890890

891891
testComponent.disable();
892892
fixture.detectChanges();
893-
expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled');
893+
expect(sliderElement!.classList).toContain('ant-slider-disabled');
894894
expect(sliderInstance.nzDisabled).toBe(true);
895895
dispatchSlideEventSequence(sliderNativeElement, 0.42, 0.19);
896896
fixture.detectChanges();
@@ -1076,7 +1076,7 @@ describe('nz-slider', () => {
10761076
});
10771077

10781078
const styles = `
1079-
::ng-deep .ant-slider { position: relative; width: 100px; height: 12px; }
1079+
::ng-deep .ant-slider { display: block; position: relative; width: 100px; height: 12px; }
10801080
::ng-deep .ant-slider .ant-slider-rail { position: absolute; width: 100%; height: 4px; }
10811081
::ng-deep .ant-slider .ant-slider-track { position: absolute; height: 4px; }
10821082
::ng-deep .ant-slider .ant-slider-handle { position: absolute; margin-left: -7px; margin-top: -5px; width: 14px; height: 14px; }

‎components/slider/step.component.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,18 @@ import { NzDisplayedStep, NzExtendedMark } from './typings';
1818
exportAs: 'nzSliderStep',
1919
preserveWhitespaces: false,
2020
template: `
21-
<div class="ant-slider-step">
22-
<span
23-
class="ant-slider-dot"
24-
*ngFor="let mark of steps; trackBy: trackById"
25-
[class.ant-slider-dot-active]="mark.active"
26-
[ngStyle]="mark.style!"
27-
></span>
28-
</div>
21+
<span
22+
class="ant-slider-dot"
23+
*ngFor="let mark of steps; trackBy: trackById"
24+
[class.ant-slider-dot-active]="mark.active"
25+
[ngStyle]="mark.style!"
26+
></span>
2927
`,
3028
imports: [NgStyle, NgForOf],
31-
standalone: true
29+
standalone: true,
30+
host: {
31+
class: 'ant-slider-step'
32+
}
3233
})
3334
export class NzSliderStepComponent implements OnChanges {
3435
static ngAcceptInputType_vertical: BooleanInput;
@@ -79,7 +80,7 @@ export class NzSliderStepComponent implements OnChanges {
7980
active: false,
8081
style: {
8182
[orient]: `${offset}%`,
82-
transform: 'translateX(-50%)'
83+
transform: this.vertical ? 'translateY(50%)' : 'translateX(-50%)'
8384
}
8485
};
8586
});

‎components/slider/style/entry.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import './index.less';
2+
@import './patch.less';
23
// style dependencies
34
@import '../../tooltip/style/entry.less';

‎components/slider/style/patch.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.ant-slider {
2+
display: block;
3+
}

0 commit comments

Comments
 (0)