Skip to content

Commit e036cc0

Browse files
ChronosSFChronosSF
authored
Merge pull request #6985 from IgniteUI/mkirova/splitter-base
Splitter base
2 parents 7429959 + 3ee197b commit e036cc0

28 files changed

+1569
-7
lines changed

‎CHANGELOG.md

+15
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,21 @@ All notable changes for each version of this project will be documented in this
1313

1414
### New Features
1515

16+
- `igxSplitter` component added.
17+
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
18+
Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the `type` input.
19+
20+
```html
21+
<igx-splitter [type]="type">
22+
<igx-splitter-pane>
23+
...
24+
</igx-splitter-pane>
25+
<igx-splitter-pane>
26+
...
27+
</igx-splitter-pane>
28+
</igx-splitter>
29+
```
30+
1631
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
1732
- Added ability to pin rows to top or bottom depending on the new `pinning` input.
1833
And new API methods `pinRow` and `unpinRow`.

‎projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/// @group components
2+
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
3+
/// @author <a href="https://github.com/simeonoff" target="_blank">Maya Kirova</a>
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
9+
@include b(igx-splitter) {
10+
// Register the component in the component registry
11+
$this: str-slice(bem--selector-to-string(&), 2, -1);
12+
@include register-component($this);
13+
14+
@include b(#{$this}-bar) {
15+
@extend %igx-splitter-bar !optional;
16+
17+
@include e(handle) {
18+
@extend %igx-splitter-handle !optional;
19+
@extend %igx-splitter-handle--horizontal !optional;
20+
}
21+
22+
@include e(expander, 'start') {
23+
@extend %igx-splitter-expander !optional;
24+
@extend %igx-splitter-expander--start !optional;
25+
}
26+
27+
@include e(expander, 'end') {
28+
@extend %igx-splitter-expander !optional;
29+
@extend %igx-splitter-expander--end !optional;
30+
}
31+
32+
@include m('vertical') {
33+
@extend %igx-splitter-bar--vertical !optional;
34+
35+
@include e(handle) {
36+
@extend %igx-splitter-handle !optional;
37+
@extend %igx-splitter-handle--vertical !optional;
38+
}
39+
40+
@include e(expander, 'start') {
41+
@extend %igx-splitter-expander !optional;
42+
@extend %igx-splitter-expander--start-vertical !optional;
43+
}
44+
45+
@include e(expander, 'end') {
46+
@extend %igx-splitter-expander !optional;
47+
@extend %igx-splitter-expander--end-vertical !optional;
48+
}
49+
}
50+
}
51+
}
52+

‎projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
////
2+
/// @group themes
3+
@function igx-splitter-theme(
4+
$palette: $default-palette,
5+
$schema: $light-schema,
6+
$elevations: $elevations,
7+
8+
$bar-color: null,
9+
$handle-color: null,
10+
$expander-color: null,
11+
$border-radius: null,
12+
$size: null
13+
) {
14+
$name: 'igx-splitter';
15+
$splitter-schema: ();
16+
17+
@if map-has-key($schema, $name) {
18+
$splitter-schema: map-get($schema, $name);
19+
} @else {
20+
$splitter-schema: $schema;
21+
}
22+
23+
$border-radius-handle: round-borders(
24+
if($border-radius, $border-radius, map-get($splitter-schema, 'border-radius')), 0, 2px
25+
);
26+
27+
$theme: apply-palette($splitter-schema, $palette);
28+
29+
@if not($handle-color) and $bar-color {
30+
$handle-color: text-contrast($bar-color);
31+
}
32+
33+
@if not($expander-color) and $bar-color {
34+
$expander-color: text-contrast($bar-color);
35+
}
36+
37+
@return extend($theme, (
38+
name: $name,
39+
palette: $palette,
40+
bar-color: $bar-color,
41+
handle-color: $handle-color,
42+
expander-color: $expander-color,
43+
border-radius: $border-radius-handle,
44+
size: $size
45+
));
46+
}
47+
48+
/// @param {Map} $theme - The theme used to style the component.
49+
/// @requires {mixin} igx-root-css-vars
50+
/// @requires rem
51+
/// @requires --var
52+
@mixin igx-splitter($theme) {
53+
@include igx-root-css-vars($theme);
54+
$splitter-color: --var($theme, 'bar-color');
55+
$hitbox-size: 4px;
56+
$debug-hitbox: false;
57+
$hitbox-debug-color: rgba(coral, .24);
58+
59+
%handle-area {
60+
position: absolute;
61+
content: '';
62+
width: 100%;
63+
height: $hitbox-size;
64+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
65+
}
66+
67+
%handle-area--vertical {
68+
width: $hitbox-size;
69+
height: 100%;
70+
}
71+
72+
%igx-splitter-bar {
73+
position: relative;
74+
display: flex;
75+
flex-grow: 1;
76+
justify-content: center;
77+
align-items: center;
78+
background: $splitter-color;
79+
border: 1px solid $splitter-color;
80+
cursor: row-resize;
81+
z-index: 99;
82+
opacity: .68;
83+
transition: opacity .15s $ease-out-quad !important;
84+
85+
&::before {
86+
@extend %handle-area;
87+
top: 100%;
88+
}
89+
90+
&::after {
91+
@extend %handle-area;
92+
bottom: 100%;
93+
}
94+
95+
&:hover {
96+
transition: all .25s ease-out;
97+
opacity: 1;
98+
}
99+
}
100+
101+
%igx-splitter-bar--vertical {
102+
flex-direction: column;
103+
height: 100%;
104+
cursor: col-resize;
105+
106+
&::before {
107+
@extend %handle-area--vertical;
108+
top: 0;
109+
right: 100%;
110+
}
111+
112+
&::after {
113+
@extend %handle-area--vertical;
114+
top: 0;
115+
left: 100%;
116+
}
117+
}
118+
119+
%igx-splitter-handle {
120+
background: --var($theme, 'handle-color');
121+
border-radius: --var($theme, 'border-radius');
122+
}
123+
124+
%igx-splitter-handle--horizontal {
125+
width: 25%;
126+
height: --var($theme, 'size');
127+
margin: 0 rem(48px);
128+
}
129+
130+
%igx-splitter-handle--vertical {
131+
width: --var($theme, 'size');
132+
height: 25%;
133+
margin: rem(48px) 0;
134+
}
135+
136+
%igx-splitter-hitbox {
137+
position: absolute;
138+
content: '';
139+
background: if($debug-hitbox, $hitbox-debug-color, transparent);
140+
}
141+
142+
%igx-splitter-expander {
143+
position: relative;
144+
width: 0;
145+
height: 0;
146+
border-right: --var($theme, 'size') solid transparent;
147+
border-left: --var($theme, 'size') solid transparent;
148+
cursor: pointer;
149+
z-index: 1;
150+
}
151+
152+
%igx-splitter-expander--start {
153+
border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color');
154+
155+
&::before {
156+
@extend %igx-splitter-hitbox;
157+
top: calc(100% - #{map-get($theme, 'size')});
158+
left: calc(100% - #{map-get($theme, 'size') * 2});
159+
width: #{map-get($theme, 'size') * 4};
160+
height: #{map-get($theme, 'size') * 3};
161+
}
162+
}
163+
164+
%igx-splitter-expander--end {
165+
border-bottom: unset;
166+
border-top: --var($theme, 'size') solid --var($theme, 'expander-color');
167+
168+
&::before {
169+
@extend %igx-splitter-hitbox;
170+
top: calc(100% - #{map-get($theme, 'size') * 2});
171+
left: calc(100% - #{map-get($theme, 'size') * 2});
172+
width: #{map-get($theme, 'size') * 4};
173+
height: #{map-get($theme, 'size') * 3};
174+
}
175+
}
176+
177+
%igx-splitter-expander--start-vertical {
178+
border-top: --var($theme, 'size') solid transparent;
179+
border-right: --var($theme, 'size') solid --var($theme, 'expander-color');
180+
border-bottom: --var($theme, 'size') solid transparent;
181+
border-left: unset;
182+
183+
&::before {
184+
@extend %igx-splitter-hitbox;
185+
top: calc(100% - #{map-get($theme, 'size') * 2});
186+
left: calc(100% - #{map-get($theme, 'size')});
187+
width: #{map-get($theme, 'size') * 3};
188+
height: #{map-get($theme, 'size') * 4};
189+
}
190+
}
191+
192+
%igx-splitter-expander--end-vertical {
193+
border-top: --var($theme, 'size') solid transparent;
194+
border-right: unset;
195+
border-bottom: --var($theme, 'size') solid transparent;
196+
border-left: --var($theme, 'size') solid --var($theme, 'expander-color');
197+
198+
&::before {
199+
@extend %igx-splitter-hitbox;
200+
left: calc(100% - #{map-get($theme, 'size') * 2});
201+
top: calc(100% - #{map-get($theme, 'size') * 2});
202+
height: #{map-get($theme, 'size') * 4};
203+
width: #{map-get($theme, 'size') * 3};
204+
}
205+
}
206+
}

‎projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
@import '../components/radio/radio-component';
5454
@import '../components/scrollbar/scrollbar-component';
5555
@import '../components/slider/slider-component';
56+
@import '../components/splitter/splitter-component';
5657
@import '../components/snackbar/snackbar-component';
5758
@import '../components/switch/switch-component';
5859
@import '../components/tabs/tabs-component';

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

+9
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
@import '../components/switch/switch-theme';
3939
@import '../components/snackbar/snackbar-theme';
4040
@import '../components/slider/slider-theme';
41+
@import '../components/splitter/splitter-theme';
4142
@import '../components/ripple/ripple-theme';
4243
@import '../components/radio/radio-theme';
4344
@import '../components/progress/progress-theme';
@@ -198,6 +199,14 @@
198199
));
199200
}
200201

202+
@if not(index($exclude, 'igx-splitter')) {
203+
@include igx-splitter(igx-splitter-theme(
204+
$palette,
205+
$schema,
206+
$border-radius: $roundness,
207+
));
208+
}
209+
201210
@if not(index($exclude, 'igx-checkbox')) {
202211
@include igx-checkbox(igx-checkbox-theme(
203212
$palette,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

+7
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
@import './scrollbar';
3939
@import './slider';
4040
@import './snackbar';
41+
@import './splitter';
4142
@import './switch';
4243
@import './tabs';
4344
@import './time-picker';
@@ -82,6 +83,7 @@
8283
/// @property {Map} igx-scrollbar [$_dark-scrollbar]
8384
/// @property {Map} igx-slider [$_dark-slider]
8485
/// @property {Map} igx-snackbar [$_dark-snackbar]
86+
/// @property {Map} igx-splitter [$_dark-splitter]
8587
/// @property {Map} igx-switch [$_dark-switch]
8688
/// @property {Map} igx-tabs [$_dark-tabs]
8789
/// @property {Map} igx-time-picker [$_dark-time-picker]
@@ -124,6 +126,7 @@ $dark-schema: (
124126
igx-scrollbar: $_dark-scrollbar,
125127
igx-slider: $_dark-slider,
126128
igx-snackbar: $_dark-snackbar,
129+
igx-splitter: $_dark-splitter,
127130
igx-switch: $_dark-switch,
128131
igx-tabs: $_dark-tabs,
129132
igx-time-picker: $_dark-time-picker,
@@ -169,6 +172,7 @@ $dark-schema: (
169172
/// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
170173
/// @property {map} igx-slider [$_dark-fluent-slider],
171174
/// @property {map} igx-snackbar [$_dark-fluent-snackbar],
175+
/// @property {map} igx-splitter [$_dark-fluent-splitter],
172176
/// @property {map} igx-switch [$_dark-fluent-switch],
173177
/// @property {map} igx-tabs [$_dark-fluent-tabs],
174178
/// @property {map} igx-time-picker [$_dark-fluent-time-picker],
@@ -211,6 +215,7 @@ $dark-fluent-schema: (
211215
igx-scrollbar: $_dark-fluent-scrollbar,
212216
igx-slider: $_dark-fluent-slider,
213217
igx-snackbar: $_dark-fluent-snackbar,
218+
igx-splitter: $_dark-fluent-splitter,
214219
igx-switch: $_dark-fluent-switch,
215220
igx-tabs: $_dark-fluent-tabs,
216221
igx-time-picker: $_dark-fluent-time-picker,
@@ -256,6 +261,7 @@ $dark-fluent-schema: (
256261
/// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
257262
/// @property {map} igx-slider [$_dark-bootstrap-slider],
258263
/// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
264+
/// @property {map} igx-splitter [$_dark-bootstrap-splitter],
259265
/// @property {map} igx-switch [$_dark-bootstrap-switch],
260266
/// @property {map} igx-tabs [$_dark-bootstrap-tabs],
261267
/// @property {map} igx-time-picker [$_dark-bootstrap-time-picker],
@@ -298,6 +304,7 @@ $dark-bootstrap-schema: (
298304
igx-scrollbar: $_dark-bootstrap-scrollbar,
299305
igx-slider: $_dark-bootstrap-slider,
300306
igx-snackbar: $_dark-bootstrap-snackbar,
307+
igx-splitter: $_dark-bootstrap-splitter,
301308
igx-switch: $_dark-bootstrap-switch,
302309
igx-tabs: $_dark-bootstrap-tabs,
303310
igx-time-picker: $_dark-bootstrap-time-picker,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss

-5
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,6 @@ $_dark-scrollbar: extend(
2020
igx-color: 'surface',
2121
lighten: 20%
2222
),
23-
24-
track-background: (
25-
igx-color: 'surface',
26-
lighten: 5%
27-
),
2823
)
2924
);
3025

0 commit comments

Comments
 (0)