Modal dialogruta

Komponent: FModal
Status: Produktionsklar

Innehåll

Användning
Storlek
API

Använd modala dialogrutor för korta interaktioner som är en del av ett flöde. Modaler kan användas för att låta användaren bekräfta ett val, för att förmedla information eller för enkel inmatning.

Använd inte modala dialogrutor för att presentera felmeddelanden eller information som användaren behöver kunna läsa under tiden som hen åtgärdar ett fel eller gör ändringar.

I de flesta fall där användaren måste uppmärksammas på viktig information eller problem är en meddelanderuta att föredra.
Rubriken har tabb-fokus när en modal dialogruta öppnas. Därefter knapparna i den ordning de presenteras och sist stängknappen. Tabb-fokus loopar genom alla klickbara ytor i en modal.
Öppna inte ytterligare en modal från en modal.

Modala dialogrutor finns i fyra varianter:

standard
information
varning
fel.

Användning

Skapa en ny Vue-komponent där f-modal används:

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

const emit = defineEmits<{ close: [] }>();
</script>

<template>
    <f-modal is-open @close="emit('close')">
        <template #header> My awesome modal </template>
        <template #content> My awesome content </template>
        <template #footer>
            <div class="button-group">
                <button
                    type="button"
                    class="button button--primary button-group__item button--large"
                    @click="emit('close')"
                >
                    Close
                </button>
            </div>
        </template>
    </f-modal>
</template>

Du kan sedan öppna din modal genom att använda useModal() (composition API) eller openModal() (options API).

<script setup lang="ts">
import { useModal } from "@fkui/vue";
import MyAwesomeModal from "./MyAwesomeModal.vue";

const { openModal } = useModal();

async function onClick(): Promise<void> {
    await openModal(MyAwesomeModal);
}
</script>

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

Användning med template (deprekerad)

Att använda FModal nästlad i template är deprekerat. Om du använder detta rekommenderar vi att du flyttar den till en egen Vue komponent och använder API för att öppna den. Se Användning för hur du använder FModal med API.

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

Storlek

Modalens höjd anpassas utifrån innehållet. I desktop (>639px) kan modalens bredd anpassas till

small (standard)
medium
large
fullwidth.

I mobil (<640px) har en modal alltid samma bredd, men det går att sätta en modal till fullskärm. Använd fullskärm när användaren ska fokusera på en deluppgift i ett flöde, till exempel används fullskärm av formulärsmodalen. Använd inte fullskärm för modala dialogrutor som visas som en reaktion på något användaren gör.

Använd size-prop för att välja storlek på modalen.

-<f-modal>
+<f-modal size="small">

För mobil finns det en fullscreen-prop för att säkerställa att modal täcker hela skärmen och är utan ram.

Den här fullscreen-propen påverkar inte modalen i desktop-läge.

-<f-modal size="medium">
+<f-modal size="medium" fullscreen>

Anpassa storlek

Implementera en CSS-klass enligt följande:

.my-fancy-modal {
    max-width: 500px;
}

Använd inte size-prop utan lägg istället till din klass direkt enligt class="..":

-<f-modal size="small">
+<f-modal class="my-fancy-modal">

Initialt fokus

När modalen öppnas så sätts initialt fokus enligt denna rangordning:

Rubrik
Första interagerbara element i innehåll
Hela innehållet

Fokushantering

Modaler hanterar som standard fokus själv där modalen flyttar fokus till rubriken vid öppning och återställer fokus till tidigare fokuserat element vid stägning. Du kan styra detta beteende med propen för focus:

"on" - komponenten hanterar fokus vid både öppning och stängning
"off" - komponenten hanterar inte fokus alls.
"open" - komponenten hanterar enbart fokus vid öppning.

API

Props

id: string Optional

The id for the root element id attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

isOpen: boolean Optional

If the modal is open. Use this to toggle if the modal should be visible or not.

Default: false

ariaCloseText: string Optional

The aria-label attribute text for the top right close button.

Default: undefined

fullscreen: boolean Optional

Enable fullscreen mode in mobile.

Default: false

type: string Optional

The type of modal. 'information', 'warning' and 'error' is valid.

Default: ""

size: string Optional

The size of modal in desktop mode.

Default: ""

focus: string Optional

Default behavior is that the modal will restore focus to previous element once closed.

"on" (default) - component will set focus both when opened and closed
"off" - focus strategy disabled
"open" - focus will only be applied once modal is opened

Default: "on"

Events

close: Event that is dispatched when the escape button is pressed. In most use cases the isOpen prop should be set to false when this event is triggered.

Slots

header: Slot for the header.
content: Slot for the main content, e.g. paragraphs, input fields, etc.
footer: Slot the footer content, i.e. buttons.

Kakor på webbplatsen

Modal dialogruta