Steg för steg-guide

Komponent: FWizard , FWizardStep
Status: Produktionsklar

Innehåll

Stegens storlek och omfattning
När steg för steg inte passar
Copyriktlinjer
För utvecklare
Props, Events & Slots

Steg för steg-guide används för att dela upp en uppgift i några få steg som passar bra att hantera i en viss ordning.

<template>
    <div>
        <f-wizard v-model="current" header-tag="h2" @completed="onCompleted">
            <f-wizard-step key="foo" :use-error-list="false" title="Stegrubrik 1">
                <f-text-field v-validation.required.maxLength="{ maxLength: { length: 100 } }">
                    Etikett-rubrik
                </f-text-field>
                <f-text-field v-validation.maxLength="{ maxLength: { length: 100 } }">
                    Etikett-rubrik (frivillig)
                </f-text-field>
            </f-wizard-step>

            <f-wizard-step key="bar" :use-error-list="false" title="Stegrubrik 2">
                <f-datepicker-field v-model="date" v-validation.required>
                    Etikett-rubrik
                </f-datepicker-field>
                <f-select-field v-model="options" v-validation.required>
                    <template #label> Etikett-rubrik </template>

                    <option :disabled="true" value="">Välj</option>
                    <option value="ALTERNATIV1">Alternativ 1</option>
                    <option value="ALTERNATIV2">Alternativ 2</option>
                </f-select-field>
            </f-wizard-step>
            <f-wizard-step key="baz" :use-error-list="false" title="Stegrubrik 3">
                En informationstext
                <template #next-button-text> Klar </template>
            </f-wizard-step>
        </f-wizard>
        <p v-if="done">Allt är ifyllt</p>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FWizard, FWizardStep, FTextField, FDatepickerField, FSelectField } from "@fkui/vue";

export default defineComponent({
    name: "WizardExampleDefault",
    components: { FWizard, FWizardStep, FTextField, FDatepickerField, FSelectField },
    data() {
        return {
            current: null,
            visible: true,
            done: false,
            date: "",
            options: "",
        };
    },
    methods: {
        onCompleted() {
            this.done = true;
        },
    },
});
</script>

Använd steg för steg för att dela upp en större uppgift som användaren ska utföra. Då kan användaren fokusera på en sak i taget istället för att bli överöst med information och val.

Använd så få steg som möjligt, helst inte fler än 5 eller 6.
Ett steg ska innehålla en eller några få enkla val eller kortfattad information.
Antalet steg ska vara fast och inte ändras beroende på val användaren gör i ett steg.
Rubrikerna för stegen måste följa korrekt rubriknivå för sidan.
Om ett steg innehåller ett formulär måste det vara komplett och rätt ifyllt innan användaren tillåtas att fortsätta till nästa steg.

Stegens storlek och omfattning

Ett steg ska innehålla en eller några få enkla val eller kortfattad information. Fokusera på en huvudfråga eller ett tydligt område. Ett steg bör ha en kort och konkret rubrik.

Innehåll och frågor som inte passar under en och samma rubrik ska inte placeras i samma steg. Om innehållet i ett steg behöver delas upp med underrubriker bör du antagligen dela upp steget i flera steg.

När steg för steg inte passar

När uppgifterna vi presenterar inte har en naturlig följd.
När vi har väldigt omfattande uppgifter som resulterar i många och långa steg.
När något av stegen tar väldigt lång tid att fylla i, i kombination med att steget blir omfattande, till exempel att användarens val skapar långa listor eller tabeller.

Copyriktlinjer

Stegrubriker

Syftar i första hand till att hjälpa till att dela in flödet i mindre delar.
Ska ha relevant copy men inte bära hela innehållet i delen - det gör till exempel etikettrubrikerna om ett steg innehåller ett formulär.
Ska ge användaren en snabb översikt över det enskilda steget och även en tydlig översikt över flödet.
Ska vara så kortfattade som möjligt.
Bör bestå av konkreta substantiv som till exempel Dagar, Bostad, Sjukdom och symtom.
”Kompletterande uppgifter” och ”Övrigt” ska undvikas. Om det är svårt att skriva en lämplig rubrik på grund av att innehållet spretar bör du se över indelningen i steg.

Knapptexter

Standardtexten på primärknappen är Fortsätt, men det går att sätta en text på primärknappen i varje steg (next-button-text).
Sekundärknappens text är alltid Avbryt.

För utvecklare

En guide består av <f-wizard> och en eller fler guidesteg <f-wizard-step>.

<f-wizard header-tag="h2">
    <f-wizard-step key="unique-identifier" title="Beskrivande titel">
        <template #default>Innehåll</template>
    </f-wizard-step>
</f-wizard>

Inmatningsfälten valideras redan med vanlig validering, men om du behöver utföra extra validering (manuella steg, korsvalidering eller validering på backend osv) så kan du använda beforeSubmit:

<f-wizard header-tag="h1">
    <f-wizard-step
        key="step1"
        title="STEP1"
        :before-next="onBeforeNext"
    ></f-wizard-step>
</f-wizard>

Notera att det är metoden onBeforeNext som ska skickas in i sin helhelt, anropa inte metoden med :before-next="onBeforeNext()". I onBeforeNext har du möjlighet att sätta nya valideringsfel på inmatningsfält:

onBeforeNext(): Promise<void> {
    const myField = getElementFromVueRef(this.refs.myField);
    ValidationService.setError(myField, "This value is invalid!");
},

Vi rekommenderar att alla fel är kopplade till ett specifikt inmatningsfält men om du istället vill avbryta inskicket och presentera ett fel med exempelvis en meddeladeruta kan du returnera FWizardStepAction.CANCEL från onBeforeNext:

onBeforeNext(): Promise<FWizardStepAction> {
    this.showErrorMessage = true;
    return FWizardStepAction.CANCEL;
},

Lägga till steg dynamiskt

<template>
    <div>
        <f-wizard
            v-model="current"
            header-tag="h2"
            disable-initial-focus
            @completed="onCompleted"
            @cancel="onCancel"
        >
            <f-wizard-step key="foo" v-test="'myOrderStep'" title="Min beställning">
                <h3>Fruktkorg</h3>
                <button type="button" class="button button--discrete" @click="addBasket">
                    <f-icon class="button__icon" name="plus" /> Lägg till fruktkorg
                </button>
            </f-wizard-step>

            <f-wizard-step
                v-for="item in fruktkorgar"
                :key="'fruktkorg-' + item.id"
                :title="'Frukt korg ' + item.id"
                :data-test="'fruitBasketStep-' + item.id"
            >
                <f-text-field
                    v-model="item.namn"
                    v-validation.required.maxLength="{ maxLength: { length: 100 } }"
                >
                    Namn på presentkort
                </f-text-field>

                <f-fieldset id="frukt-checkbox-group" v-validation.required>
                    <template #label> Vad ska ingå i din fruktkorg? </template>

                    <f-checkbox-field
                        v-for="frukt in frukter"
                        :key="frukt.value"
                        v-model="item.valdaFrukter"
                        :value="frukt.value"
                    >
                        {{ frukt.text }}
                    </f-checkbox-field>
                </f-fieldset>

                <button type="button" class="button button--discrete" @click="removeBasket(item)">
                    <f-icon name="trashcan" /> Ta bort fruktkorg
                </button>
            </f-wizard-step>

            <f-wizard-step
                key="baz"
                v-test="'myInfoStep'"
                title="Mina uppgifter"
                @before-next="onBeforeNext"
            >
                <p>Min adress</p>
            </f-wizard-step>
        </f-wizard>

        <!-- [html-validate-disable-next no-inline-style] -->
        <p style="margin-top: 30px">
            Ett steg kan öppnas programatiskt, t.ex. man klickar 'ändra' i ett granska-steg.
            <button type="button" @click="current = 'baz'">Öppna sista steget</button>
        </p>
        <pre>v-model: {{ current }}</pre>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FWizard, FWizardStep, FTextField, FIcon, FFieldset, FCheckboxField } from "@fkui/vue";

export default defineComponent({
    name: "WizardExample",
    components: { FWizard, FWizardStep, FTextField, FIcon, FFieldset, FCheckboxField },
    data() {
        return {
            current: null,
            visible: true,
            fruktkorgar: [],
            n: 1,
            frukter: [
                { value: "BANAN", text: "Banan 🍌" },
                { value: "ÄPPLE", text: "Äpple 🍏" },
                { value: "MANDARIN", text: "Mandarin 🍊" },
                { value: "ANANAS", text: "Ananas 🍍" },
                { value: "VATTENMELON", text: "Vattenmelon 🍉" },
                { value: "ANDRA_FRUKTER", text: "Andra frukter" },
            ],
        };
    },
    methods: {
        addBasket() {
            this.fruktkorgar.push({
                id: this.n++,
                valdaFrukter: [],
            });
        },
        removeBasket(item) {
            const index = this.fruktkorgar.findIndex((it) => it.id === item.id);
            if (index >= 0) {
                this.fruktkorgar.splice(index, 1);
            }
        },
        onBeforeNext() {
            return new Promise((resolve) => {
                console.log("Här kanska man anropar backend för att kontrollera något?");
                setTimeout(resolve, 2000);
            });
        },
        onCompleted() {
            alert("Tack för din beställning! 🙏 Applikationsspecifik logik tar det vidare.");
        },
        onCancel() {
            alert(
                "Avbryt anropat av användaren. Applikationsspecifik logik tar hand om eventuell bekräftelse.",
            );
        },
    },
});
</script>

Props, Events & Slots

FWizard

Props
Name	Description	Type	Required	Default
v-model	‐	string	false	null
headerTag	Element to render for the header element inside the wizard steps.	string	true	‐
disableInitialFocus	When the first wizard step is registered, it is opened and focused by default. Set this property to disable that behaviour.	boolean	false	false

Events
Name	Description	Properties
cancel	Emitted when wizard is canceled, i.e. user pressing 'Avbryt' button.	‐
change	Vue2 v-model event.	<anonymous>: FWizardKey
completed	Emitted when wizard is finished, i.e. user pressing 'Fortsätt' button in last step.	‐
update:modelValue	V-model event.	<anonymous>: FWizardKey

Slots
Name	Description	Bindings
default	One or more <f-wizard-step> elements	‐

FWizardStep

Props
Name	Description	Type	Required	Default
title	‐	string	true	‐
beforeNext	Supply this function in order to run actions before navigating to the next step. It is possible to cancel the navigation by returning `BeforeNextAction.CANCEL`. When cancelled, the consumer is responsible to indicate why this happened. Note that `FWizardStep` already checks validity of contained fields using `v-validation` before allowing navigation to the next step.	FValidationFormCallback	false	function() { /* do nothing */ }
beforeValidation	Supply this function in order to run actions before `FWizardStep` checks validity. `beforeValidation` is used by `FValidationForm`. It is possible to cancel the navigation by returning `BeforeNextAction.CANCEL`. When cancelled, the consumer is responsible to indicate why this happened.	FValidationFormCallback	false	function() { /* do nothing */ }
useErrorList	Include the error list component.	boolean	false	true

Slots
Name	Description	Bindings
step-of	‐	headerClass stepNumber totalSteps
error-message	‐	‐
default	‐	‐
next-button-text	‐	‐

Kakor på webbplatsen

Steg för steg-guide