Bekräftelsemodal

Komponent: FConfirmModal
Status: Produktionsklar

Innehåll

Användning
Knapparna
Bekräftelsemodal med tre knappar
Skärmläsare
API
Relaterat

Använd en bekräftelsemodal när användare har gjort ett val som har stor påverkan och som hen inte kan ångra enkelt.

En bekräftelsemodal har

rubriktext
brödtext
en knapptext för den destruktiva handlingen, till exempel för att ta bort uppgifter
en knapptext för att ångra och gå tillbaka.

<template>
    <div>
        <button type="button" class="button button--secondary" @click="onClick">Ta bort</button>
    </div>
</template>

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

export default defineComponent({
    name: "FConfirmModalApiExample",
    data() {
        return {
            frukt: {
                namn: "Mango",
            },
        };
    },
    methods: {
        confirmRemove(frukt) {
            return confirmModal(this, {
                heading: "Ta bort frukt",
                content: `Är du säker att du vill ta bort "${frukt.namn}"?`,
                confirm: "Ja, ta bort",
                dismiss: "Nej, behåll",
            });
        },
        async onClick() {
            if (await this.confirmRemove(this.frukt)) {
                alert("Bekräftade");
            }
        },
    },
});
</script>

Användning

För att öppna en bekräftelsemodal använder du confirmModal() (options API) eller useModal() (composition API).

// options api
const confirmed = await confirmModal(this, {
    heading: "Ta bort frukt",
    content: `Är du säker att du vill ta bort "${frukt.namn}"?`,
    confirm: "Ja, ta bort",
    dismiss: "Nej, behåll",
});
if (confirmed) {
    /* do something */
}

// composition api
const { confirmModal } = useModal();

async function onOpen(): Promise<void> {
    const confirmed = await confirmModal({
        heading: "Ta bort frukt",
        content: `Är du säker att du vill ta bort "${frukt.namn}"?`,
        confirm: "Ja, ta bort",
        dismiss: "Nej, behåll",
    });
    if (confirmed) {
        /* do something */
    }
}

Användning med template (deprekerad)

Att använda FConfirmModal i template är deprekerat. Om du använder detta rekommenderar vi att du tar bort f-confirm-modal och istället använder API för att öppna modalen.

Se Användning för hur du använder FConfirmModal med API.

 <template>
     <div>
         <button type="button" @click="onClick">Open modal</button>
-        <f-confirm-modal></f-confirm-modal>
     </div>
 </template>

Knapparna

En sekundär knapp används för att ångra och gå tillbaka. En primärknapp används för att utföra den destruktiva handlingen.

En bekräftelsemodal kan även ha en tredje knapp.

På Försäkringskassan.se placeras den sekundära knappen först, följt av den primära. Eftersom det primära alternativet att bekräfta tidigare val är "destruktivt" placeras den sist för att minimera risken att användaren råkar välja det av misstag.

För interna system följer vi Windows standard, det primära alternativet placeras först.

Du styr den inbördes ordning som knapparna presenteras i med konfiguration i applikationen där modalen används.

Bekräftelsemodal med tre knappar

<template>
    <div>
        <button type="button" class="button button--secondary" @click="onClick">Tre knappar</button>
        <pre> Modalen stängdes med resultatet: {{ action }} </pre>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { type ModalResult, openModal, FConfirmModal } from "@fkui/vue";

export default defineComponent({
    name: "FConfirmModalCustomButtons",
    data() {
        return {
            action: undefined as ModalResult<void> | undefined,
            isOpen: false,
            threeButtons: [
                {
                    label: "Ja, ta bort",
                    type: "primary",
                    screenreader: "telefonnumret",
                    event: "confirm",
                },
                { label: "Nej, uppdatera telefonnumret", event: "update" },
                { label: "Nej, ta inte bort", screenreader: "telefonnumret", event: "dismiss" },
            ],
        };
    },
    methods: {
        async onClick() {
            this.action = await openModal(this, FConfirmModal, {
                props: {
                    heading: "Ta bort telefonnummer",
                    content: "Vill du ta bort ditt telefonnummer?",
                    buttons: this.threeButtons,
                    size: "large",
                },
            });
        },
    },
});
</script>

Skärmläsare

Du kan lägga till extra skärmläsartext på knappar med screenreader-property:

-buttons: [{ label: "Stäng", event: "dismiss" }];
+buttons: [{ label: "Stäng", screenreader: "formuläret", event: "dismiss" }];

Om du använder screenreader för en knapp så kommer skärmläsare att läsa upp den texten efter knapptexten i label. Detta används för att tydliggöra vad knappen kommer att göra i de fallen där det kan vara otydligt för skärmläsaranvändare.