Komponent

FCard

Status

Preliminär

Använd ett kort för att representera ett objekt eller en person, till exempel ett dokument, en kalenderbokning, ett barn eller en föräldradag.

<template>
    <f-card>
        <template #header="{ headingSlotClass }">
            <h3 :class="headingSlotClass">Arbete</h3>
        </template>
        <template #default>
            <p>Arbetsgivare</p>
            <p>
                Gatan 1 <br />
                123 45 Staden <br />
                Sverige
            </p>
            <p>
                <label class="label"> Telefonnummer </label>
                <span> 0109999999 </span>
            </p>
        </template>
        <template #footer>
            <div class="button-group">
                <button
                    class="button button-group__item button--tertiary button--medium button--align-text"
                    type="button"
                >
                    <f-icon name="trashcan"></f-icon>
                    <span> Ta bort </span>
                </button>

                <button
                    class="button button-group__item button--tertiary button--medium button--align-text"
                    type="button"
                >
                    <f-icon name="pen"></f-icon>
                    <span> Ändra </span>
                </button>
            </div>
        </template>
    </f-card>
</template>

<script>
import { defineComponent } from "vue";
import { FCard, FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FCardExample",
    components: { FCard, FIcon },
});
</script>

Ett kort innehåller information och åtgärder. Ett kort ska kunna stå ensamt utan att förlita sig på sammanhanget, till exempel rubriker. Ett kort kan inte slås samman med ett annat kort, eller delas upp i flera. Om du behöver en underrubrik i ett kort så är det ett tecken på att du borde dela upp kortet i flera kort.

Om det är mycket information som ska presenteras kan kortet visa en sammanfattning medan all information visas på en egen sida som öppnas från kortet. Undvik att expanderbara kort för att visa ytterligare information. Ett kort ska aldrig öppna ytterligare kort.

Ett kort kan innehålla flera knappar eller länkar, till exempel för att visa detaljer, redigera uppgifter eller för att radera objektet eller personens uppgifter.

Innehåll

Ett kort har tre ytor där innehåll kan placeras:

• Rubrik (header)
• Innehåll (default)
• Knappar och länkar (footer)

Rubriken kan också användas som en länk för att visa detaljer om objektet eller personen. Undvik att göra hela kortet till en länk.

Rubriken ska sättas till rätt nivå.

När du inte ska använda kort

• En lista med kort ska inte användas när du behöver lista ett större antal objekt som har samma innehåll och layout. Då passar komponenterna lista eller tabell bättre. Lista och tabell är framförallt att föredra om användaren behöver ha en bra överblick över alla poster för att kunna jämföra dem.
• Placera inte långa listor eller mycket omfattande information i kort.
• Gruppera inte information eller formulärskomponeter med kort.

Felstatus på kort

Det är möjligt att indikera om ett kort är felaktigt genom att aktivera validering (v-validation). Det går inte att lägga på enskilda validatorer, utan status hanteras helt manuellt av konsumenten.

-<f-card>
+<f-card v-validation>

Konsumenten behöver ange det element som ska fokuseras på kopplat till ett fel (focus-ref). Vanligtvis är detta en knapp för att redigera ett korts innehåll. Fokus sätts vanligtvis på elementet av omkringliggande formulär vid submit, lite beroende på vad man satt för felhantering på formuläret (visa fellista eller fokus på första fel).

-<f-card>
+<f-card :focus-ref="editButton">

När fokus hamnar på angivet focus-ref-element har konsumenten ansvar att informera skärmläsaranvändare om att det finns felaktiga uppgifter i kortet. Komponenten förser footer-slotten med detaljer om felet.

<template #footer="{ hasError, validationMessage }">
    <button type="button">
        <span>Ändra</span>
        <span v-if="hasError" class="sr-only">{{ validationMessage }}</span>
    </button>
</template>

Som standard visas ett felmeddelande tillsammans med en felikon under kortets rubrik. Använd error-message-slotten för att definiera ett eget beteende.

<f-card>
+    <template #error-message="{ hasError, validationMessage }">
+        Egen visning av felmeddelande
+    </template>
/<f-card>

Felstatus sätts manuellt av konsumenten genom att anropa metoder i ValidationService.

/* sätter ogiltig status */
ValidationService.setError(element, "Felmeddelande");

/* nollställer till giltig status */
ValidationService.resetState(element);

/* omvaliderar så att ändrad status återspeglas direkt */
ValidationService.validateElement(element);

<script setup lang="ts">
import { ValidationService } from "@fkui/logic";
import { useTemplateRef } from "vue";
import { FCard, FIcon, FValidationForm, getElementFromVueRef } from "@fkui/vue";

const cardRef = useTemplateRef("card");
const focusRef = useTemplateRef("focus");

function setInvalid(): void {
    ValidationService.setError(getElementFromVueRef(cardRef.value), "Uppgifter saknas");
    ValidationService.validateElement(getElementFromVueRef(cardRef.value));
}

function setValid(): void {
    ValidationService.resetState(getElementFromVueRef(cardRef.value));
    ValidationService.validateElement(getElementFromVueRef(cardRef.value));
}
</script>

<template>
    <f-validation-form :use-error-list="false">
        <f-card ref="card" v-validation :focus-ref>
            <template #header="{ headingSlotClass }">
                <h3 :class="headingSlotClass">Arbete</h3>
            </template>
            <template #default>
                <p>Arbetsgivare</p>
                <p>
                    Gatan 1 <br />
                    123 45 Staden <br />
                    Sverige
                </p>
                <p>
                    <label class="label"> Telefonnummer </label>
                    <span> 0109999999 </span>
                </p>
            </template>
            <template #footer="{ hasError }">
                <div class="button-group">
                    <button
                        class="button button-group__item button--tertiary button--medium button--align-text"
                        type="button"
                    >
                        <f-icon name="trashcan"></f-icon>
                        <span> Ta bort </span>
                    </button>

                    <button
                        id="focus"
                        ref="focus"
                        class="button button-group__item button--tertiary button--medium button--align-text"
                        type="button"
                    >
                        <f-icon name="pen"></f-icon>
                        <span>
                            Ändra
                            <span v-if="hasError" class="sr-only">
                                på kortet, det innehåller fel
                            </span>
                        </span>
                    </button>
                </div>
            </template>
        </f-card>

        <button type="submit" class="button button--primary">Simulera inskick av formulär</button>
    </f-validation-form>

    <button
        type="button"
        class="button button-group__item button--tertiary button--large"
        @click="setInvalid"
    >
        Markera kort som felaktigt
    </button>
    <button
        type="button"
        class="button button-group__item button--tertiary button--large"
        @click="setValid"
    >
        Markera kort som giltigt
    </button>
</template>

API

Props

focusRef: HTMLElement | null Optional

Element to focus on when card is invalid. Set when using validation.

Default: null

id: string Optional

Optional id (generated by default).

Default: () => ElementIdService.generateElementId()

Slots

header

Slot for the title.

Bindings:

• headingSlotClass: unknown

error-message

Slot for displaying error message.

Bindings:

• hasError: unknown
• validationMessage: unknown

default

Slot for the main content, e.g. paragraphs, input fields, etc.

footer

Slot the footer content, i.e. buttons.

Bindings:

• hasError: unknown
• validationMessage: unknown