antoniandre
Allow sizes in pixels
Could you please add absolute sizes to panes? So we would be able to specify certain pane's initial widths not in percents of the parent but in absolute values, like px. And also disable resizing for certain panes would be welcome. Thanks.
Hi guys I am adding this in my to do list. It involves a big refactoring though.
try this ...
<div ref="SplitPanesRef" class="flex flex-col grow-1">
<splitpanes :horizontal="false">
<pane class="xcol"
:min-size="20"
:size="100 - propEditorWidthPercent"
:max-size="100 - propEditorWidthPercent">
<div class="flex flex-col grow-1 bg-gray-100"></div>
</pane>
<pane class="flex flex-col p-10 bg-white"
:min-size="propEditorWidthPercent"
:size="propEditorWidthPercent"
:max-size="80">
<span class="h-40 rounded bg-gray-50"></span>
</pane>
</splitpanes>
</div>
// Vue3 Code
...
setup(props, context){
const SplitPanesRef = ref(null as any);
const SplitPanesRefResizeObserver = ref(null as ResizeObserver|null); // add Observer
const propEditorWidthPercent = ref(0);
onMounted(()=>{
console.log(route.params,'params');
SplitPanesRefResizeObserver.value = new ResizeObserver(() => {
propEditorWidthPercent.value = Math.min(Math.round( 360 / SplitPanesRef.value.clientWidth * 100), 50);
})
SplitPanesRefResizeObserver.value.observe(SplitPanesRef.value); // remove Observer
});
onBeforeUnmount(()=>{
SplitPanesRefResizeObserver.value && SplitPanesRefResizeObserver.value.disconnect()
})
return {
SplitPanesRef,
propEditorWidthPercent,
}
}
First of all, thank you very much for this project, it has been very helpful to me today. However, I noticed this historical issue while using it and it seems to have been around for quite some time. I was wondering if the author still plans to add this feature?
First of all, thank you very much for this project, it has been very helpful to me today. However, I noticed this historical issue while using it and it seems to have been around for quite some time. I was wondering if the author still plans to add this feature?
try this ...
<template>
<Splitpanes ref="splitpanesRef" class="chat-container" :dbl-click-splitter="false">
<Pane class="left" :size="leftPaneSize" max-size="50"></Pane>
<Pane class="right" :size="100 - leftPaneSize"></Pane>
</Splitpanes>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useResizeObserver } from '@vueuse/core'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const DEFAULT_WIDTH = 270
const leftPaneSize = ref(30)
const splitpanesRef = ref()
const setLeftPaneSize = () => {
const width = splitpanesRef.value.$el.clientWidth
leftPaneSize.value = (DEFAULT_WIDTH / width) * 100
}
onMounted(() => {
setLeftPaneSize()
useResizeObserver(splitpanesRef, (entries) => {
const entry = entries[0]
const { width } = entry.contentRect
leftPaneSize.value = (DEFAULT_WIDTH / width) * 100
})
})
</script>