Komponent

FOffline

Status

Produktionsklar

Offline används när användaren saknar internetuppkoppling. Ett felmeddelande visas som uppmärksammar användaren om detta. Offline är en overlay som lägger sig högst upp över övrigt innehåll när internetanslutningen går ner. Den försvinner igen när anslutningen är tillbaka.

Det finns ett par alternativ för att få komponenten att visa sig:

• Aktivera "offline-läge" i browsern
• Stäng av nätverksanslutningen (exempelvis koppla ned Wi-Fi på en mobil enhet).

Du kan även använda knappen nedanför som simulerar nätverksproblem genom att skicka samma event som browsern gör då den upptäcker att uppkopplingen har misslyckats (detta visar komponenten men sätter inte browsern i offline-läge).

Endast för dokumentation! Obeservera att knappen som simulerar ett offline-event kan bete sig konstigt om du byter sida när FOffline-komponenten visas.

<template>
    <div v-test="'offlineExample'">
        <f-offline> {{ offlineMessage }} </f-offline>
        <button type="button" @click="toggle">Visa/Dölj komponent</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { FOffline } from "..";

export default defineComponent({
    name: "FOfflineExample",
    components: { FOffline },
    data() {
        return {
            isPushed: false,
            offlineMessage:
                "Det verkar som att du inte har någon internetuppkoppling just nu. Tänk på att du behöver uppkoppling för att kunna signera",
        };
    },
    methods: {
        toggle() {
            if (this.isPushed) {
                window.dispatchEvent(new Event("online"));
                this.isPushed = false;
            } else {
                window.dispatchEvent(new Event("offline"));
                this.isPushed = true;
            }
        },
    },
});
</script>

Användning av komponent

Användning med standardtext

<f-offline></f-offline>

Användning med en egen text

<f-offline>
    Det verkar som att du inte har någon internetuppkoppling just nu. Tänk på
    att du behöver uppkoppling för att kunna signera
</f-offline>

API

Slots

default

Slot for customizing text message.