ui-thing
ui-thing copied to clipboard
How to call the expand and collapse methods of SplitterPanel?
I have tried to rewrite UiSplitterPanel
like this, with useForwardExpose
:
<script lang="ts" setup>
import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'radix-vue'
import type { SplitterPanelEmits, SplitterPanelProps } from 'radix-vue'
const props = withDefaults(defineProps<SplitterPanelProps>(), {})
const emit = defineEmits<SplitterPanelEmits>()
const forwarded = useForwardPropsEmits(props, emit)
const { forwardRef } = useForwardExpose()
</script>
<template>
<SplitterPanel
v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"
v-bind="forwarded"
:ref="forwardRef"
>
<slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />
</SplitterPanel>
</template>
I do get the SplitterPanel
object, but it doesn't have these two methods.
But when I try to get the SplitterPanel
directly with a fixed ref, it is possible to see both methods.