Expanderbart stycke

Komponent: FExpandableParagraph
Status: Produktionsklar

Innehåll

Flera stycken i en lista
Rubriknivåer och -storlekar
API

Använd ett expanderbart stycke för att dölja innehållet under en rubrik och minska mängden information som presenteras för användaren vid en första anblick.

<script lang="ts">
import { defineComponent } from "vue";
import { FExpandableParagraph } from "@fkui/vue";

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

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

Använd en rubrik på rätt nivå (H1 till H6) för att strukturen på sidan ska bli rätt.
Flera expanderbara stycken kan vara öppna samtidigt. Ett stycke ska inte stängas när ett annat öppnas.
Nästla inte expanderbara stycken.
Till varje rubrik går det att koppla relaterad information (används typiskt i kombination med att flera expanderbara stycken presenteras i en lista).
Expanderbara stycken kan användas för att presentera en lista med rubriker. När expanderbara stycken presenteras i en lista visas en avskiljare mellan styckena. Listan kan kombineras med att visa relaterad information.

Flera stycken i en lista

<script lang="ts">
import { defineComponent } from "vue";
import { FExpandableParagraph } from "@fkui/vue";

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

<template>
    <div>
        <f-expandable-paragraph :expanded="expanded1" header-tag="h2" @toggle="onToggle1">
            <template #title> Titel (h2) </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
        <f-expandable-paragraph :expanded="expanded2" header-tag="h3" @toggle="onToggle2">
            <template #title> Titel (h3) </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
        <f-expandable-paragraph :expanded="expanded3" header-tag="h4" @toggle="onToggle3">
            <template #title> Titel (h4) </template>
            <template #related> 2020-06-25 </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
    </div>
</template>

Rubriknivåer och -storlekar

<script lang="ts">
import { defineComponent } from "vue";
import { FExpandableParagraph } from "@fkui/vue";

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

<template>
    <div>
        <f-expandable-paragraph
            :expanded="expanded1"
            header-tag="h2"
            :list="true"
            @toggle="onToggle1"
        >
            <template #title> Titel (h2) </template>
            <template #related> 2020-06-25 </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
        <f-expandable-paragraph
            :expanded="expanded2"
            header-tag="h3"
            header-visual-tag="h6"
            :list="true"
            @toggle="onToggle2"
        >
            <template #title> Titel (h3) (visuell h6) </template>
            <template #related> 2020-06-25 </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
        <f-expandable-paragraph
            :expanded="expanded3"
            header-tag="h6"
            header-visual-tag="h2"
            :list="true"
            @toggle="onToggle3"
        >
            <template #title> Titel (h6) (visuell h2) </template>
            <template #related> 2020-06-25 </template>
            <template #default>
                <span> Innehåll </span>
            </template>
        </f-expandable-paragraph>
    </div>
</template>