Komponent

FStaticField

Status

Produktionsklar

Statiskt presentationsfält används för att presentera information som användaren inte ska kunna redigera och är statisk.

Statisk text tillsammans med ett inmatningsfält

<template>
    <div data-test="output-field">
        <f-text-field
            id="normal"
            v-model="name"
            v-validation.maxLength="{ maxLength: { length: 100 } }"
        >
            Namn
        </f-text-field>

        <f-static-field>
            <template #label> Beskrivning </template>
            En liten statisk beskrivning.
        </f-static-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FStaticField, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FStaticFieldTextField",
    components: { FStaticField, FTextField },
    data() {
        return { name: "" };
    },
});
</script>

Statisk text med tooltip

<template>
    <div data-test="output-field">
        <f-static-field>
            <template #label> Etikett </template>
            <template #tooltip>
                <f-tooltip screen-reader-text="Läs mer om avancerat fält" header-tag="h2">
                    <template #header> Mer om avancerat fält </template>
                    <template #body> Detta fältet kräver lite närmare förklaring. </template>
                </f-tooltip>
            </template>
            <template #description="{ descriptionClass, formatDescriptionClass }">
                <span :class="descriptionClass"> Beskrivning av etikett </span>
                <span :class="formatDescriptionClass"> (format) </span>
            </template>
            <template #default> En liten statisk text. </template>
        </f-static-field>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FStaticField, FTooltip } from "@fkui/vue";

export default defineComponent({
    name: "FStaticFieldTooltipDescription",
    components: { FStaticField, FTooltip },
});
</script>

API

Slots

label

Slot for label content.

tooltip

Slot primarily for tooltip.

description

Optional slot for description. See FLabel for details.

Bindings:

• description-class: unknown
• format-description-class: unknown

default

Slot for text content.