Filpresentatör

Komponent: FFileItem
Status: Produktionsklar

Innehåll

Filpresentatör med knapp och progress
Ikoner
API

Filpresentatör används för att presentera fil, till exempel när användaren valt fil med filväljaren.

<template>
    <f-file-item :file-name="fileName" :mime-type="fileType"></f-file-item>
</template>

<script>
import { defineComponent } from "vue";
import { FFileItem } from "@fkui/vue";

export default defineComponent({
    name: "FFileItemDefault",
    components: { FFileItem },
    data() {
        return { fileName: "bar.jpg", fileType: "image/jpeg" };
    },
    methods: {},
});
</script>

Filpresentatör med knapp och progress

<template>
    <div>
        <label>
            Progress:
            <!-- [html-validate-disable-next no-inline-style] -->
            <input
                id="upload-progress"
                v-model.number="progress"
                type="number"
                style="margin-bottom: 20px"
                @input="filteredProgress = progress === '' ? 0 : progress"
        /></label>

        <f-file-item :file-name="fileName" :mime-type="mimeType">
            <template #row>
                <button
                    v-if="progress < 100"
                    type="button"
                    class="button button--tertiary button--medium file-item__file-remove file-item__abort"
                >
                    <f-icon name="close" class="button__icon"></f-icon>
                    <span> Avbryt uppladdning </span>
                </button>
                <button
                    v-else-if="progress === 100"
                    type="button"
                    class="button button--tertiary button--medium file-item__file-remove"
                >
                    <f-icon name="trashcan" class="button__icon"></f-icon>
                    Ta bort
                </button>
            </template>

            <f-progressbar
                v-if="progress < 100"
                aria-label="progress"
                :value="filteredProgress"
            ></f-progressbar>
        </f-file-item>
    </div>
</template>

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

export default defineComponent({
    name: "FFileItemButtonProgress",
    components: { FFileItem, FIcon, FProgressbar },
    data() {
        return {
            fileName: "bar.pdf",
            mimeType: "application/pdf",
            progress: 30,
            filteredProgress: 30,
        };
    },
});
</script>

Ikoner

Filikonen till vänster bestäms av mimetype:

Bilder använder f-icon-pic
PDF använder f-icon-pdf
Word-dokument använder f-icon-doc
Övriga filer använder f-icon-file

<template>
    <div>
        <f-file-item
            v-for="item in files"
            :key="item.fileName"
            :file-name="item.fileName"
            :mime-type="item.fileType"
        ></f-file-item>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FFileItem } from "@fkui/vue";

const files = [
    { fileName: "my-image.png", fileType: "image/png" },
    { fileName: "my-document.pdf", fileType: "application/pdf" },
    { fileName: "my-document.doc", fileType: "application/msword" },
    { fileName: "my-file.txt", fileType: "text/plain" },
];

export default defineComponent({
    name: "FFileItemIcons",
    components: {
        FFileItem,
    },
    data() {
        return { files };
    },
});
</script>