Komponent

FMinimizablePanel

Status

Beta

Minimerbar panel (FMinimizablePanel) används tillsammans med applikationsmall 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 { FMinimizablePanel, FPageLayout, FResizePane } 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">

Initialt state

Som standard är minimerbar panel expanderad i desktop. Med initial="minimized" kan du ändra så den är minimerad som standard.

-<f-minimizable-panel>
+<f-minimizable-panel initial="minimized">

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.

initial: union Optional

Start in initial state.

Default is expanded.

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