diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 96ea80685..ba3e7f8c0 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #383838; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 37b5aaa8c..c8cfe2365 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #383838; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 1f4bd9ee9..acb3b1f06 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #383838; } diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 2b076e16c..f40c670c2 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #383838; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #383838; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index f9c459691..6425acf7d 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -2908,7 +2908,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #3f4b5b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 790ae8abc..4bee34305 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -2908,7 +2908,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #3f4b5b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #3f4b5b; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 2bfaa3cba..8ba177989 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -2908,7 +2908,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index d8f3b302e..71af6c0ba 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -2908,7 +2908,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index ac6b4b3be..830cdc975 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -2871,7 +2871,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #edebe9; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #edebe9; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index dd2a0574a..b696bacd6 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index d544788a9..02d186f33 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 6e61f484f..3de6c3c31 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index ffb76de04..9b52bb85c 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #4b4b4b; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #4b4b4b; } diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index d3cf67c93..630282271 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index aba558117..8a784edd8 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 04bea28d1..949ee12cf 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index d3a8f6198..2a9cbd0a4 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 086fb27a4..b296f40e5 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index a2bd1ccda..b8c9f0df8 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(255, 255, 255, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(255, 255, 255, 0.12); } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 4f79d420a..c56908559 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index a504423ce..2bdc75940 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -2920,7 +2920,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: rgba(0, 0, 0, 0.12); } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: rgba(0, 0, 0, 0.12); } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 36e5608d4..e05c266b4 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -2871,7 +2871,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 6cfeb3467..4e5b1c526 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 74cdc36a6..36d93bf5e 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index a07c6205b..81611be84 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -2883,7 +2883,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #d8dae2; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #d8dae2; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 3d8032041..41e21beb8 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -2871,7 +2871,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dadada; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dadada; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 4c0be0838..2a431e2f5 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index df50778ad..976cfd2da 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 0d8668782..f2659370b 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 621c143ab..c19d0e32d 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #dee2e6; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 84e69fcde..233c871f3 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #304562; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index bb769023e..baf906117 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #304562; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 29544d368..54868cd36 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #304562; } diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index a14aae9b3..ed640b8fe 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -2896,7 +2896,7 @@ .p-splitter .p-splitter-gutter .p-splitter-gutter-handle { background: #304562; } -.p-splitter.p-splitter-resizing .p-splitter-gutter { +.p-splitter .p-splitter-gutter-resizing { background: #304562; } diff --git a/src/components/splitter/Splitter.d.ts b/src/components/splitter/Splitter.d.ts index cfb326655..8726d6392 100644 --- a/src/components/splitter/Splitter.d.ts +++ b/src/components/splitter/Splitter.d.ts @@ -3,6 +3,8 @@ import Vue from 'vue'; declare class Splitter extends Vue { layout?: string; gutterSize?: number; + stateKey?: string; + stateStorage?: string; } export default Splitter; \ No newline at end of file diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue index 318ca4a58..4c0d88b46 100644 --- a/src/components/splitter/Splitter.vue +++ b/src/components/splitter/Splitter.vue @@ -2,7 +2,7 @@
@@ -13,6 +13,7 @@ import DomHandler from '../utils/DomHandler'; export default { + emits: ['resizeend'], name: 'splitter', props: { layout: { @@ -22,19 +23,49 @@ export default { gutterSize: { type: Number, default: 4 + }, + stateKey: { + type: String, + default: null + }, + stateStorage: { + type: String, + default: 'session' } }, dragging: false, mouseMoveListener: null, mouseUpListener: null, size: null, + gutterElement: null, startPos: null, prevPanelElement: null, nextPanelElement: null, nextPanelSize: null, prevPanelSize: null, + panelSizes: null, + prevPanelIndex: null, mounted() { - this.initialize(); + if (this.panels && this.panels.length) { + let initialized = false; + if (this.isStateful()) { + initialized = this.restoreState(); + } + + if (!initialized) { + let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel')); + let _panelSizes = []; + + this.panels.map((panel, i) => { + let panelInitialSize = panel.props && panel.props.size ? panel.props.size: null; + let panelSize = panelInitialSize || (100 / this.panels.length); + _panelSizes[i] = panelSize; + children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; + }); + + this.panelSizes = _panelSizes; + } + } }, beforeUnmount() { this.clear(); @@ -44,28 +75,17 @@ export default { isSplitterPanel(child) { return child.type.name === 'splitterpanel'; }, - initialize() { - if (this.panels && this.panels.length) { - let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel')); - - this.panels.forEach((panel, i) => { - let panelSize = panel.props && panel.props.size ? panel.props.size: null; - - if (panelSize) - children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; - else - children[i].style.flexBasis = 'calc(' + (100 / this.panels.length) + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; - }); - } - }, - onGutterMouseDown(event) { + onGutterMouseDown(event, index) { + this.gutterElement = event.currentTarget; this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el); this.dragging = true; this.startPos = this.layout === 'horizontal' ? event.pageX : event.pageY; - this.prevPanelElement = event.currentTarget.previousElementSibling; - this.nextPanelElement = event.currentTarget.nextElementSibling; + this.prevPanelElement = this.gutterElement.previousElementSibling; + this.nextPanelElement = this.gutterElement.nextElementSibling; this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size; this.nextPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true): DomHandler.getOuterHeight(this.nextPanelElement, true)) / this.size; + this.prevPanelIndex = index; + DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing'); DomHandler.addClass(this.$el, 'p-splitter-resizing'); this.bindListeners(); }, @@ -84,13 +104,22 @@ export default { if (this.validateResize(newPrevPanelSize, newNextPanelSize)) { this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; + this.panelSizes[this.prevPanelIndex] = newPrevPanelSize; + this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize; } }; document.addEventListener('mousemove', this.mouseMoveListener); } if (!this.mouseUpListener) { - this.mouseUpListener = () => { + this.mouseUpListener = (event) => { + if (this.isStateful()) { + this.saveState(); + } + + this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes}); + DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing'); + DomHandler.removeClass(this.$el, 'p-splitter-resizing'); this.clear(); this.unbindListeners(); }; @@ -127,7 +156,42 @@ export default { this.nextPanelElement = null; this.prevPanelSize = null; this.nextPanelSize = null; - DomHandler.removeClass(this.$el, 'p-splitter-resizing'); + this.gutterElement = null; + this.prevPanelIndex = null; + }, + isStateful() { + return this.stateKey != null; + }, + getStorage() { + switch(this.stateStorage) { + case 'local': + return window.localStorage; + + case 'session': + return window.sessionStorage; + + default: + throw new Error(this.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".'); + } + }, + saveState() { + this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes)); + }, + restoreState() { + const storage = this.getStorage(); + const stateString = storage.getItem(this.stateKey); + + if (stateString) { + this.panelSizes = JSON.parse(stateString); + let children = [...this.$el.children].filter(child => DomHandler.hasClass(child, 'p-splitter-panel')); + children.forEach((child, i) => { + child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)'; + }); + + return true; + } + + return false; } }, computed: { diff --git a/src/views/splitter/SplitterDemo.vue b/src/views/splitter/SplitterDemo.vue index a180cf00a..a3cba3ff2 100644 --- a/src/views/splitter/SplitterDemo.vue +++ b/src/views/splitter/SplitterDemo.vue @@ -10,6 +10,15 @@
Horizontal
+ + + Panel 1 + + + Panel 2 + + + Panel 1 @@ -17,6 +26,9 @@ Panel 2 + + Panel 3 +
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue index f59def706..900848319 100644 --- a/src/views/splitter/SplitterDoc.vue +++ b/src/views/splitter/SplitterDoc.vue @@ -97,6 +97,23 @@ import SplitterPanel from 'primevue/splitterpanel'; </SplitterPanel> </Splitter> + + +
Stateful
+

Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes + can be restored. Define a stateKey to enable this feature. Default location of the state is + session storage and other option is the local storage which can be configured using the stateStorage property.

+
+
+<Splitter stateKey="mykey" stateStorage="local">
+	<SplitterPanel>
+		Panel 1
+	</SplitterPanel>
+	<SplitterPanel>
+		Panel 2
+	</SplitterPanel>
+</Splitter>
+
 
Properties of SplitterPanel
@@ -152,6 +169,18 @@ import SplitterPanel from 'primevue/splitterpanel'; number 4 Size of the divider in pixels. + + + stateKey + string + null + Storage identifier of a stateful Splitter. + + + stateStorage + string + session + Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage. @@ -220,6 +249,18 @@ import SplitterPanel from 'primevue/splitterpanel'; Panel 2 </SplitterPanel> </Splitter> + + <Splitter style="height: 300px"> + <SplitterPanel class="p-d-flex p-ai-center p-jc-center"> + Panel 1 + </SplitterPanel> + <SplitterPanel class="p-d-flex p-ai-center p-jc-center"> + Panel 2 + </SplitterPanel> + <SplitterPanel class="p-d-flex p-ai-center p-jc-center"> + Panel 3 + </SplitterPanel> + </Splitter> </div> <div class="card">