Komponent

FMinimizablePanel

Status

Beta

Minimerbar panel (FMinimizablePanel) används tillsammans med applikationsmallen för att ge användaren möjlighet att visa innehåll i öppet läge eller minimerat läge.

Komponenten har även stöd för att kombineras ihop med justerbar yta (FResizePane) eller fixerad yta (FFixedPane).

<script setup lang="ts">
import { FPageLayout, FResizePane, FMinimizablePanel } from "@fkui/vue";
</script>

<template>
    <f-page-layout layout="three-column">
        <template #default="layoutScope">
            <f-resize-pane :slot="layoutScope.left" min="150px" max="40%" initial="600px">
                <f-minimizable-panel>
                    <template #default="panelScope">
                        <template v-if="panelScope.isOpen">
                            <h1 :slot="panelScope.header">Rubrik</h1>
                            <p :slot="panelScope.content">Innehåll</p>
                            <div :slot="panelScope.footer">Fot</div>
                        </template>
                    </template>
                </f-minimizable-panel>
            </f-resize-pane>
            <div :slot="layoutScope.content">[Applikationsyta]</div>
        </template>
    </f-page-layout>
</template>

<style>
[data-test="minimizable-panel-example"] [data-v-app] {
    container-type: size;
    height: 230px;
}
</style>

Användning

Använd native slots för att placera innehåll:

• header
• default
• footer.

Native slot innebär att du som konsument skapar elementet för sloten med attributet slot.

Använd flaggan isOpen för att styra vad som renderas beroende på om panelen är öppen eller minimerad.

<f-minimizable-panel>
    <template #default="{ header, footer, content, isOpen }">
        <template v-if="isOpen">
            <h1 :slot="header">Rubrik</h1>
            <p :slot="content">Innehåll</p>
            <div :slot="footer">Fot</div>
        </template>
    </template>
</f-minimizable-panel>

Du kan byta ut ikonen via icon-sloten.

<f-minimizable-panel>
    <template #icon>
        <f-icon name="awesome-icon"></f-icon>
    </template>
</f-minimizable-panel>

Anpassa texter

Ikonens skärmläsartext består av ett prefix och en beskrivning av panelen:

{prefix} {context}

Prefix varierar beroende på om panelen är öppen eller inte.

Standardtext för minimerat läge:

"Återställ panel"

Standardtext för öppet läge:

"Minimera panel"

Konsumenten kan påverka ikonens skärmläsartext via textnycklar eller genom att sätta context-proppen in till komponenten:

-<f-minimizable-panel>
+<f-minimizable-panel context="My awesome panel">

Textnycklar

fkui.minimizable-panel.close

Del av skärmläsartext för knapp då panel är öppen.

Default: "Minimera"

fkui.minimizable-panel.open

Del av skärmläsartext för knapp då panel är minimerad.

Default: "Återställ"

fkui.minimizable-panel.context

Del av skärmläsartext för knapp.

Default: "panel"

Props, Events & Slots

Props

context: string Optional

Screenreader context for toggle button.

Default value of fkui.minimizable-panel.context.

Slots

default

Content

Bindings:

• isOpen: boolean — panel state
• header: string — native slot name
• footer: string — native slot name
• content: string — native slot name

icon

Icon

Bindings:

• isOpen: boolean — panel state