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.

<template>
    <f-expandable-paragraph :expanded="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>

<script>
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>

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

<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>

<script>
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>

Rubriknivåer och -storlekar

<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>

<script>
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>