Composable för att styra hur en justerbar yta ska bete sig:

• Om ytan ska vara justerbar eller ej.
• Om ytan ska visas eller ej.

Om flera komponenter nyttjar useResize() i samma justerbara yta och minst en av dem aktiverar en egenskap, exempelvis om minst en komponent sätter enabled, så är den justerbara ytan justerbar.

Syntax

function useResize(options);

Parametrar

options Optional

Egenskaper att styra.

enabled: boolean Optional

Om aktiv kommer den justerbara ytan att vara justerbar. Default: true.

visible: boolean Optional

Om aktiv kommer den justerbara ytan att visas. Default: true.

overlay: boolean Optional

Om aktiv kommer den justerbara ytan att visas som en overlay istället för statisk. offset kan användas för att sätta en statisk storlek för hur mycket plats den justerbara ytan ska ta upp. Default: false.

offset: number Optional

När overlay är aktiv sätter detta hur mycket statisk plats den justerbara ytan ska ta upp. Default: 0.

Returvärde

Ett objekt som innehåller:

size: Readonly<Ref<number>>

Nuvarande storlek på ytan i px.

Exempel

Exempel för att visa/dölja justerbar yta baserat på om en anpassad panel är synlig eller dold.

<script setup lang="ts">
import { ref } from "vue";
import { useResize } from "@fkui/vue";

const isOpen = ref(false);

useResize({
    visible: isOpen,
});
</script>

<template>
    <div v-if="isOpen">[content]</div>
</template>

Relaterat

• FResizePane
• Egen layout till applikationsmall