Komponent

FProgressbar

Status

Produktionsklar

Förloppsindikator används för att visa status för en operation som förväntas ta relativt lång tid.

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

export default defineComponent({
    name: "FProgressbarExample",
    components: { FProgressbar },
    data() {
        return {
            currentProgress: 40,
        };
    },
    methods: {
        decrease() {
            this.currentProgress = Math.max(this.currentProgress - 20, 0);
        },
        increase() {
            this.currentProgress = Math.min(this.currentProgress + 20, 100);
        },
    },
});
</script>

<template>
    <div>
        <f-progressbar
            :value="currentProgress"
            aria-label="Progressbar"
            label="Progressbar"
            value-text="You have uploaded %VALUE% %."
        ></f-progressbar>

        <pre
            class="debug-data"
        ><span class="sr-only">Debug-data: </span>value: {{currentProgress}}</pre>
        <button data-test="increase" type="button" @click="increase()">Increase</button>
        <button data-test="decrease" type="button" @click="decrease()">Decrease</button>
        <label>
            Progress:
            <input v-model.number="currentProgress" type="number" />
        </label>
    </div>
</template>

API

Props

value: number

Sets the progress. Higher value indicates further progress.

Value must be in range 0-100.

valueText: string Optional

Text that the screenreader will read.

%VALUE% can be used as a placeholder for the actual value e.g "You have uploaded %VALUE% percent".

Default: "Du har slutfört %VALUE% %."

aria-label: string

Accessible name for this progressbar. Should describe the purpose of this progressbar.

Relaterat

• FProgressbarPageObject