Skip to content

Commit a05bf6a

Browse files
zdrawkuzdrawku
authored
Merge pull request #6169 from IgniteUI/slider-ticks-drop-svg-master
Slider ticks
2 parents ea77294 + cf69d2e commit a05bf6a

File tree

17 files changed

+1161
-168
lines changed

17 files changed

+1161
-168
lines changed

‎CHANGELOG.md‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,30 @@ All notable changes for each version of this project will be documented in this
5656
</ng-template>
5757
</igx-grid>
5858
```
59-
- `IgxCarousel`:
60-
- `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
61-
- `gesturesSupport` input is added, which can be used to enable and disable gestures
62-
- `maximumIndicatorsCount` input is added, which can be used to set the number of visible indicators
63-
- `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
64-
- `animationType` input is added, which can be used to set animation when changing slides
65-
- `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
66-
- `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
67-
- `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
59+
- `IgxSlider`:
60+
- `primaryTicks` input was added. Which sets the number of primary ticks
61+
- `secondaryTicks` input was added. Which sets the number of secondary ticks.
62+
- `showTicks` input was added. Which show/hide all slider ticks and tick labels.
63+
- `primaryTickLabels` input was added. Which shows/hides all primary tick labels.
64+
- `secondaryTickLabels` input was added. Shows/hides all secondary tick labels.
65+
- `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
66+
- `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
67+
- `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
68+
69+
- `IgxCarousel`:
70+
- `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation
71+
- `gesturesSupport` input is added, which can be used to enable and disable gestures
72+
- `maximumIndicatorsCount` input is added, which can be used to set the number of visible indicators
73+
- `indicatorsOrientation` input is added, which can be used to set the position of indicators it can be top or bottom
74+
- `animationType` input is added, which can be used to set animation when changing slides
75+
- `indicatorTemplate` directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
76+
- `nextButtonTemplate` directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
77+
- `prevButtonTemplate` directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
6878

6979
- `IgxSelect`:
7080
- adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
7181

82+
7283
## 8.2.6
7384

7485
### New Features

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-component.scss‎

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,44 @@
2222
@extend %igx-slider-track-fill !optional;
2323
}
2424

25-
@include e(track-ticks) {
26-
@extend %igx-slider-track-ticks !optional;
25+
@include e(ticks) {
26+
@extend %igx-slider__ticks !optional;
27+
}
28+
29+
@include e(ticks, $m: tall) {
30+
@extend %igx-slider__ticks--tall !optional;
31+
}
32+
33+
@include e(ticks, $m: top) {
34+
@extend %igx-slider__ticks--top !optional;
35+
}
36+
37+
@include e(tick-label, $m: hidden) {
38+
@extend %igx-slider__tick-label--hidden !optional;
39+
}
40+
41+
@include e(tick-labels, $m: top-bottom) {
42+
@extend %igx-slider__tick-labels--top-bottom !optional;
43+
}
44+
45+
@include e(tick-labels, $m: bottom-top) {
46+
@extend %igx-slider__tick-labels--bottom-top !optional;
47+
}
48+
49+
@include e(ticks-group) {
50+
@extend %igx-slider__ticks-group !optional;
51+
}
52+
53+
@include e(ticks-group, $m: tall) {
54+
@extend %igx-slider__ticks-group--tall !optional;
55+
}
56+
57+
@include e(ticks-tick) {
58+
@extend %igx-slider__ticks-tick !optional;
59+
}
60+
61+
@include e(ticks-label) {
62+
@extend %igx-slider__ticks-label !optional;
2763
}
2864

2965
@include e(thumbs) {
@@ -76,6 +112,10 @@
76112
}
77113
}
78114

115+
@include e(track-steps) {
116+
@extend %igx-slider-track-steps !optional;
117+
}
118+
79119
@include m(disabled) {
80120
@extend %igx-slider-display !optional;
81121

@@ -84,14 +124,21 @@
84124
@extend %igx-slider-track--disabled !optional;
85125
}
86126

127+
@include e(track-steps) {
128+
@extend %igx-slider-track-steps--disabled !optional;
129+
}
130+
87131
@include e(track-fill) {
88132
@extend %igx-slider-track-fill !optional;
89133
@extend %igx-slider-track-fill--disabled !optional;
90134
}
91135

92-
@include e(track-ticks) {
93-
@extend %igx-slider-track-ticks !optional;
94-
@extend %igx-slider-track-ticks--disabled !optional;
136+
@include e(ticks-tick) {
137+
@extend %igx-slider__tick--disabled !optional;
138+
}
139+
140+
@include e(ticks-label) {
141+
@extend %igx-slider__ticks-labels--disabled !optional;
95142
}
96143

97144
@each $t in $thumbs {

‎projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss‎

Lines changed: 180 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
1717
/// @param {Color} $base-track-color [null] - The base background color of the track.
1818
/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.
1919
///
20+
/// @param {Color} $tick-label-color [null] - The color of the tick label.
21+
/// @param {Color} $tick-label-color--tall [null] - The color of the tall tick label .
22+
/// @param {Color} $tick-color [null] - The background-color of the tick.
23+
/// @param {Color} $tick-color--tall [null] - The background-color of the tall tick.
24+
///
2025
/// @requires $default-palette
2126
/// @requires $light-schema
2227
/// @requires apply-palette
@@ -44,7 +49,11 @@
4449
$thumb-disabled-border-color: null,
4550
$track-hover-color: null,
4651
$thumb-hover-color: null,
47-
$base-track-hover-color: null
52+
$base-track-hover-color: null,
53+
$tick-label-color: null,
54+
$tick-label-color-tall: null,
55+
$tick-color: null,
56+
$tick-color-tall: null,
4857
) {
4958
$name: 'igx-slider';
5059
$slider-schema: ();
@@ -75,7 +84,11 @@
7584
disabled-base-track-color: $disabled-base-track-color,
7685
thumb-border-color: $thumb-border-color,
7786
thumb-disabled-border-color: $thumb-disabled-border-color,
78-
base-track-hover-color: $base-track-hover-color
87+
base-track-hover-color: $base-track-hover-color,
88+
tick-label-color: $tick-label-color,
89+
tick-label-color-tall: $tick-label-color-tall,
90+
tick-color: $tick-color,
91+
tick-color-tall: $tick-color-tall,
7992
));
8093
}
8194

@@ -96,6 +109,13 @@
96109
fluent: 4px
97110
), map-get($theme, variant));
98111

112+
// Slide ticks
113+
$tick-push: rem(4px);
114+
$base-tick-height: rem(8px);
115+
$tick-height: $base-tick-height;
116+
$tick-height--tall: $base-tick-height * 2;
117+
$tick-width: rem(2px);
118+
99119
$thumb-border-width: map-get((
100120
material: 0,
101121
fluent: 2px
@@ -165,10 +185,11 @@
165185
height: 0;
166186
cursor: default;
167187
z-index: 1;
188+
left: 0;
168189
}
169190

170191
%igx-slider-track {
171-
position: absolute;
192+
position: relative;
172193
width: 100%;
173194
height: rem($slider-track-height);
174195
background: --var($theme, 'base-track-color');
@@ -179,7 +200,110 @@
179200
background: --var($theme, 'disabled-base-track-color');
180201
}
181202

182-
%igx-slider-track-ticks {
203+
%igx-slider-track-fill {
204+
position: absolute;
205+
width: 100%;
206+
height: inherit;
207+
background: --var($theme, 'track-color');
208+
transform-origin: #{$left} center;
209+
transform: scaleX(0);
210+
}
211+
212+
%igx-slider-track-fill--disabled {
213+
visibility: hidden;
214+
}
215+
216+
%igx-slider__ticks {
217+
width: 100%;
218+
display: flex;
219+
position: absolute;
220+
top: $tick-push;
221+
justify-content: space-between;
222+
z-index: 1;
223+
224+
&%igx-slider__ticks--top {
225+
bottom: $tick-push;
226+
top: auto;
227+
align-items: flex-end;
228+
}
229+
}
230+
231+
%igx-slider__ticks-group {
232+
display: flex;
233+
flex-direction: column;
234+
align-items: center;
235+
position: relative;
236+
237+
&:first-of-type {
238+
margin-left: rem(-1px);
239+
}
240+
241+
&:last-of-type {
242+
margin-left: rem(-1px);
243+
}
244+
}
245+
246+
%igx-slider__ticks-label {
247+
color: --var($theme, 'tick-label-color');
248+
position: absolute;
249+
top: $tick-height--tall;
250+
transform: translate(-50%);
251+
line-height: .7;
252+
opacity: 1;
253+
transition: opacity .2s $ease-in-out-quad;
254+
}
255+
256+
%igx-slider__ticks-tick {
257+
background: --var($theme, 'tick-color');
258+
height: $tick-height;
259+
width: $tick-width;
260+
}
261+
262+
%igx-slider__ticks--tall {
263+
%igx-slider__ticks-label {
264+
top: calc(#{$tick-height--tall} + #{$tick-height});
265+
}
266+
}
267+
268+
%igx-slider__tick--disabled {
269+
background: --var($theme, 'disabled-base-track-color')!important;
270+
}
271+
272+
%igx-slider__ticks-labels--disabled {
273+
color: --var($theme, 'disabled-base-track-color')!important;
274+
}
275+
276+
%igx-slider__ticks-group--tall {
277+
%igx-slider__ticks-tick {
278+
height: $tick-height--tall;
279+
background: --var($theme, 'tick-color-tall');
280+
}
281+
282+
%igx-slider__ticks-label {
283+
top: calc(#{$tick-height--tall} + #{$tick-height});
284+
color: --var($theme, 'tick-label-color-tall');
285+
}
286+
}
287+
288+
%igx-slider__ticks--top {
289+
%igx-slider__ticks-label {
290+
bottom: calc(#{$tick-height} + #{$tick-height});
291+
top: auto;
292+
}
293+
294+
&%igx-slider__ticks--tall {
295+
%igx-slider__ticks-label {
296+
bottom: calc(#{$tick-height--tall} + #{$tick-height});
297+
top: auto;
298+
}
299+
}
300+
}
301+
302+
%igx-slider__tick-label--hidden {
303+
opacity: 0;
304+
}
305+
306+
%igx-slider-track-steps {
183307
position: absolute;
184308
width: 100%;
185309
height: rem($slider-track-height);
@@ -189,21 +313,63 @@
189313
z-index: 1;
190314
}
191315

192-
%igx-slider-track-ticks--disabled {
316+
%igx-slider-track-steps--disabled {
193317
visibility: hidden;
194318
}
195319

196-
%igx-slider-track-fill {
197-
position: absolute;
198-
width: 100%;
199-
height: inherit;
200-
background: --var($theme, 'track-color');
201-
transform-origin: #{$left} center;
202-
transform: scaleX(0);
320+
%igx-slider__tick-labels--top-bottom {
321+
%igx-slider__ticks-group {
322+
display: block;
323+
}
324+
325+
%igx-slider__ticks-label {
326+
writing-mode: vertical-rl;
327+
transform: translate(-50%) rotate(0deg);
328+
}
329+
330+
%igx-slider__ticks--tall {
331+
%igx-slider__ticks-label {
332+
top: calc(#{$tick-height--tall} + #{rem(2px)});
333+
}
334+
}
335+
336+
&%igx-slider__ticks--top {
337+
%igx-slider__ticks-label {
338+
writing-mode: vertical-rl;
339+
transform: translate(-50%) rotate(0deg);
340+
}
341+
342+
%igx-slider__ticks--tall {
343+
%igx-slider__ticks-label {
344+
bottom: calc(#{$tick-height--tall} + #{rem(2px)});
345+
}
346+
}
347+
}
203348
}
204349

205-
%igx-slider-track-fill--disabled {
206-
visibility: hidden;
350+
%igx-slider__tick-labels--bottom-top {
351+
%igx-slider__ticks-group {
352+
display: block;
353+
}
354+
355+
356+
%igx-slider__ticks-label {
357+
writing-mode: vertical-rl;
358+
transform: translate(-50%) rotate(180deg);
359+
}
360+
361+
&%igx-slider__ticks--top {
362+
%igx-slider__ticks-label {
363+
writing-mode: vertical-rl;
364+
transform: translate(-50%) rotate(180deg);
365+
}
366+
367+
%igx-slider__ticks--tall {
368+
%igx-slider__ticks-label {
369+
bottom: calc(#{$tick-height--tall} + #{rem(2px)});
370+
}
371+
}
372+
}
207373
}
208374

209375
%igx-thumb-display {

0 commit comments

Comments
 (0)