Komponent

FExpandablePanel

Status

Produktionsklar

Använd en expanderbar panel för att gruppera information och formulärskomponenter. Med en expanderbar panel kan mängden information som visas vid en första anblick minskas.

<template>
    <f-expandable-panel :expanded="expanded" @toggle="onToggle">
        <template #title> Titel </template>
        <template #default>
            Innehåll
            <p>
                <a class="anchor" href="" target="_blank"> Länk till annan sida </a>
            </p>
        </template>
    </f-expandable-panel>
</template>

<script>
import { defineComponent } from "vue";
import { FExpandablePanel } from "@fkui/vue";

export default defineComponent({
    name: "FExpandablePanelExample",
    components: { FExpandablePanel },
    data() {
        return {
            expanded: false,
            type: Boolean,
        };
    },
    methods: {
        onToggle() {
            this.expanded = !this.expanded;
        },
    },
});
</script>

En expanderbar panel består av 3 ytor (slots):

• Title: panelens rubrik.
• Default: innehåll som ska visas när panelen är öppen.
• Outside: relaterat innehåll som visas under den öppna panelen.

En expanderbar panel ger möjlighet att uppmärksamma användare på förändringar eller händelser.

<template>
    <div>
        <f-expandable-panel :expanded="expanded1" :notifications="1" @toggle="onToggle1">
            <template #title> Titel med en notifiering </template>
            <template #default> Innehåll </template>
        </f-expandable-panel>

        <f-expandable-panel :expanded="expanded2" :notifications="2" @toggle="onToggle2">
            <template #title> Titel med två notifieringar </template>
            <template #default> Innehåll </template>
        </f-expandable-panel>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FExpandablePanel } from "@fkui/vue";

export default defineComponent({
    name: "FExpandablePanelExample",
    components: { FExpandablePanel },
    data() {
        return {
            expanded1: false,
            expanded2: false,
        };
    },
    methods: {
        onToggle1() {
            this.expanded1 = !this.expanded1;
        },
        onToggle2() {
            this.expanded2 = !this.expanded2;
        },
    },
});
</script>

En expanderbar panel kan visa relaterat innehåll under den panelen när den är öppen.

<template>
    <f-expandable-panel :expanded="expanded" @toggle="onToggle">
        <template #title> Titel </template>
        <template #default> Innehåll </template>
        <template #outside>
            Relaterat innehåll som visas när panelen är expanderad men utanför body
        </template>
    </f-expandable-panel>
</template>

<script>
import { defineComponent } from "vue";
import { FExpandablePanel } from "@fkui/vue";

export default defineComponent({
    name: "FExpandablePanelExample",
    components: { FExpandablePanel },
    data() {
        return {
            expanded: false,
            type: Boolean,
        };
    },
    methods: {
        onToggle() {
            this.expanded = !this.expanded;
        },
    },
});
</script>

API

Props

expanded: boolean Optional

Toggle expanded/collapsed state

Default: false

headerTag: string Optional

Element to render for the header element inside the expandable panel. 'h1', 'h2', 'h3', 'h4', 'h5' and 'h6' is valid.

Default: "h2"

id: string Optional

The id for the content id attribute. If the prop is not set the id will be generated.

Default: () => ElementIdService.generateElementId()

notifications: number Optional

Number of notifications present in panel.

If set to zero (default) no notification badge will be displayed.

Default: 0

screenReaderNotificationTemplate: string Optional

‐

Default: "Du har %VALUE% notifieringar."

Events

toggle

Emitted when panel heading is clicked.

Arguments:

• <anonymous>: MouseEvent

Slots

title

Slot used for title content

default

Slot used for content shown when panel is expanded

outside

Slot used for optional content rendered below panel when expanded