Komponent

FResizePane

Status

Beta

Justerbar yta (FResizePane) används tillsammans med Applikationslayout för göra en yta med justerbar storlek.

Ytans storlek kan justeras med pekdon genom att dra i och släppa avgränsaren mellan ytorna eller med tangentbord:

• Vänster och Höger ökar/minskar storleken.
• Home och End maximerar/minimerar storleken.

Ytans storlek lagras i webläsaren så nästa gång användaren tar upp samma applikation så återställs ytans storlek.

Användning

FResizePane kan enbart användas i ytor där paneler kan fästas, för de standardlayouter som designsystemet levererar är det ytorna:

• left (för paneler till vänster)
• right (för paneler till höger)

Skapar du en egen layout är det alla ytor där attachPanel inte är "none".

Lägg FResizePanel komponenten som första elementet i respektive yta:

<f-page-layout layout="left-panel">
    <template #default="{ left }">
        <f-resize-pane :slot="left"> Vänster ytans innehåll </f-resize-pane>
    </template>
</f-page-layout>

Begränsa storlek

Storleken på ytan kan begränsas genom att använda min- och max propen. Värden kan anges antingen som absolut storlek i pixlar (px), i procent (%) eller båda samtidigt.

• 200px - minsta/största storlek är 200px
• 20% - minsta/största storlek är 20% av applikationslayoutens totala bredd.
• 200px 20% - minsta/största är det minsta/största av 200px eller 20%.

Storleken refererar till innehållet i ytan, dvs 200px innebär att det finns 200px effektiv yta för innehåll. Ytans totala storlek blir 200px + storleken på handtaget för att justera storleken.

Initial storlek

Den initiala storleken på ytan kan anges med initial propen. Värde kan anges antingen som absolut storlek i pixlar (px) eller i procent (%).

• 200px - initial storlek är 200px
• 20% - initial storlek är 20% av applikationslayoutens totala bredd.

Anpassad panel

En anpassad panel använder composable useResize() composable för att få tillgång till det API som exponeras från justerbar yta. Som konsument kan du styra om ytan ska

• vara justerbar
• visas.

Samtliga är valfria och aktiverade som standard.

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

const enabled = ref(true);
const visible = ref(true);

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

Läs mer om useResize.

Props, Events & Slots

Props

min: string Optional

Minimal size of pane.

Can be set in px, % (percent of application layout total size) or both as a space-separated list, e.g. 200px 20%.

Default: "0"

max: string Optional

Maximum size of pane.

Can be set in px, % (percent of application layout total size) or both as a space-separated list, e.g. 600px 50%.

Default: "100%"

initial: string Optional

Initial size of pane used when the pane is used for the first time.

Can be set in px or % (percent of application layout total size)

Default: "50%"

Slots

default

Pane content