Kontextmeny

Komponent: FContextMenu
Status: Preliminär

Innehåll

Bara text
Ikoner och text
API

En kontextmeny presenterar en popup-ruta med funktioner kopplade till ett objekt, till exempel en lista eller tabellrad.

Använd en kontextmeny för att presentera flera åtgärder som hör ihop när det inte finns plats eller är önskvärt att visa alla funktioner direkt. Kontextmenyn aktiveras alltid med en knapp som har aria-haspopup="menu".

Placera bara funktioner som används sällan i en kontextmeny.

Menyvalens texter ska vara korta och tydliga, som texter på knappar, exempelvis "Skriv ut" , "Ersätt" eller "Kopiera".
En ikon kan användas för att tydliggöra.
Använd en delningslinje för att gruppera eller särskilja vissa funktioner i menyn.
Ange ett namn som tydligt beskriver syftet för kontextmenyn i aria-label prop.

Bara text

<template>
    <div data-testid="fcontextmenu-exempel2">
        <button
            ref="popupAnchor"
            data-test="open-example-contextmenu-button"
            type="button"
            class="button button--primary"
            aria-haspopup="menu"
            @click="onClick"
        >
            Öppna
        </button>
        <pre>Selected: {{ selected }}</pre>
        <f-context-menu
            :is-open="isOpen"
            :items="items"
            :anchor="getAnchor()"
            @close="onClose"
            @select="onSelect"
        ></f-context-menu>
    </div>
</template>

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

/** @type {ContextMenuItem[]} */
const exampleItems = [
    { label: "Skriv ut", key: "MENU_1" },
    { label: "Påminnelse", key: "MENU_2" },
    { label: "Ändra", key: "MENU_3" },
    { separator: true },
    { label: "Ta bort", key: "MENU_4" },
    { label: "Utan ikon", key: "MENU_5" },
    { separator: true },
    { label: "Sista menyval med längsta bredd som överstiger 260px", key: "MENU_6" },
];

export default defineComponent({
    name: "FContextMenuExampleTextOnly",
    components: { FContextMenu },
    data() {
        return {
            items: exampleItems,
            selected: "",
            isOpen: false,
        };
    },
    methods: {
        getAnchor() {
            return this.$refs.popupAnchor;
        },
        onClose() {
            this.isOpen = false;
        },
        onClick() {
            this.isOpen = !this.isOpen;
        },
        onSelect(value) {
            this.selected = value;
        },
    },
});
</script>

Ikoner och text

<template>
    <div data-testid="fcontextmenu-exempel1">
        <button
            ref="popupAnchor"
            data-test="open-example-contextmenu-button"
            type="button"
            class="button button--primary"
            aria-haspopup="menu"
            @click="onClick"
        >
            Öppna
        </button>
        <pre>Selected: {{ selected }}</pre>
        <f-context-menu
            data-test="contextmenu-open"
            :is-open="isOpen"
            :items="items"
            :anchor="getAnchor()"
            @close="onClose"
            @select="onSelect"
        ></f-context-menu>
    </div>
</template>

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

/** @type {ContextMenuItem[]} */
const exampleItems = [
    { label: "Påminnelse", key: "MENU_2", icon: "bell" },
    { label: "Ändra", key: "MENU_3", icon: "pen" },
    { separator: true },
    { label: "Ta bort", key: "MENU_4", icon: "trashcan" },
    { label: "Utan ikon", key: "MENU_5" },
];

export default defineComponent({
    name: "FContextMenuExample",
    components: { FContextMenu },
    data() {
        return {
            items: exampleItems,
            selected: "",
            isOpen: false,
        };
    },
    methods: {
        getAnchor() {
            return this.$refs.popupAnchor;
        },
        onClose() {
            this.isOpen = false;
        },
        onClick() {
            this.isOpen = !this.isOpen;
        },
        onSelect(value) {
            this.selected = value;
        },
    },
});
</script>

I detta exemplet används typen ContextMenuItem för att definiera valen i menyn. { separator: true } används för att positionera en avskiljare mellan två menyval.

import { ContextMenuItem } from "@fkui/vue";

const exampleItems: Array<ContextMenuItem> = [
    { label: "Påminnelse", key: "MENU_2", icon: "bell" },
    { label: "Ändra", key: "MENU_3", icon: "pen" },
    { separator: true },
    { label: "Ta bort", key: "MENU_4", icon: "trashcan" },
    { label: "Utan ikon", key: "MENU_5" },
];

Ikonerna definieras med hjälp av icon-property som är satt till namnet på en ikon från fk-icon, se FIcon för listan av tillgängliga ikoner.

 const items: Array<ContextMenuItem> = [
-    { label: "Skriv ut", key: "print" },
+    { label: "Skriv ut", key: "print", icon: "print" },
 ];

Om du behöver en ikon från ett annat ikon-bibliotek, gör en import och ange namnet på biblioteket i ContextMenuItem, parametern iconLibrary:

+import "fk-icons/dist/f-internal";
import { ContextMenuItem } from "@fkui/vue";

 const items: Array<ContextMenuItem> = [
-    { label: "Copy", key: "copy", icon: "copy" },
+    { label: "Copy", key: "copy", icon: "copy", iconLibrary: "f-internal" },
 ];

API

Props
Name	Description	Type	Required	Default
isOpen	Toggle open/closed popup.	boolean	true	‐
anchor	DOM element to position popup at.	HTMLElement \| undefined	false	undefined
items	The items to be diplayed in the menu	ContextMenuItem[]	true	‐
ariaLabel	Unique accessible name for navigation landmark.	string	false	"Kontextuell meny"

Events
Name	Description	Properties
close	Event that is dispatched after an item is selected or after pressing for example esc in the menu	‐
select	Event that is dispatched when an item is selected.	<anonymous>: string

Kakor på webbplatsen

Kontextmeny

Bara text

Ikoner och text

API