Navigeringsmeny

Komponent: FNavigationMenu
Status: Produktionsklar

Innehåll

Navigeringsmeny i horisontellt läge
Navigeringsmeny i vertikalt läge
Overflow exempel
Ange modell (v-model:route)
Skärmläsare
API

Navigeringsmeny låter användaren navigera i en applikation med flera undersidor och se vilken sida användaren befinner sig på.

Navigeringsmeny i horisontellt läge

<template>
    <div>
        <pre>selectedRoute: {{ selectedRoute }}</pre>
        <f-navigation-menu
            :routes="routes"
            @selected-route="selectedRoute = $event"
        ></f-navigation-menu>
    </div>
</template>

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

export default defineComponent({
    name: "FNavigationMenuHorizontal",
    components: { FNavigationMenu },
    data() {
        return {
            /** @type {NavigationMenuItem[]} */
            routes: [
                { label: "label1", route: "ROUTE_1" },
                { label: "label2", route: "ROUTE_2" },
                { label: "label3", route: "ROUTE_3" },
                { label: "label4", route: "ROUTE_4", href: "/", target: "" },
            ],
            selectedRoute: "",
        };
    },
});
</script>

I detta exemplet används typen NavigationMenuItem för att definiera länkar i menyn. Det finns två typer av länkar: "in-app" och "extern". Om användaren väljer ett item utan href skickas en event selectedRoute med argumentet route som kan användas ihop med till exempel Vue router. Om användaren klickar på ett item med en href blir beteendet som att klicka på en extern länk.

const routes: NavigationMenuItem[] = [
    { label: "label1", route: "ROUTE_1" },
    { label: "label2", route: "ROUTE_2" },
    { label: "label3", route: "ROUTE_3" },
    { label: "label4", route: "ROUTE_4", href: "/", target: "" },
];

Navigeringsmeny i vertikalt läge

Du aktiverar vertikalt läge genom att använda vertical prop:

 <f-navigation-menu
    :routes="routes"
+   vertical
    @selectedRoute="selectedRoute=$event"
 ></f-navigation-menu>

<template>
    <div>
        <pre>selectedRoute: {{ selectedRoute }}</pre>
        <f-navigation-menu
            vertical
            :routes="routes"
            @selected-route="selectedRoute = $event"
        ></f-navigation-menu>
    </div>
</template>

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

export default defineComponent({
    name: "FNavigationMenuVertical",
    components: { FNavigationMenu },
    data() {
        return {
            /** @type {NavigationMenuItem[]} */
            routes: [
                { label: "label1", route: "ROUTE_1" },
                { label: "label2", route: "ROUTE_2" },
                { label: "label3", route: "ROUTE_3" },
                { label: "label4", route: "ROUTE_4", href: "/", target: "" },
            ],
            selectedRoute: "",
        };
    },
});
</script>

Overflow exempel

Detta exemplet visar på hur overflow beter sig. Overflow sker då ett element, till exempel navigeringsmenyn, har för mycket innehåll i sig (består av för många menuitems) för att kunna visas inom sin tilldelade yta (bredden i den här exemplet). Justera fönstrets storlek för att visa beteende vid overflow.

<template>
    <div>
        <pre>selectedRoute: {{ selectedRoute }}</pre>
        <f-navigation-menu
            :routes="routes"
            @selected-route="selectedRoute = $event"
        ></f-navigation-menu>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FNavigationMenu } from "@fkui/vue";
/* same routes as used by vue-router */
import { routes } from "./router";

export default defineComponent({
    name: "FNavigationMenuExample",
    components: { FNavigationMenu },
    props: {},
    data: () => {
        return {
            routes: routes,
            selectedRoute: "",
        };
    },
    methods: {},
});
</script>

Ange modell (v-model:route)

En route-modell kan anges i navigeringsmenyn för att kunna styra vald route programmatiskt. Om ett värde tilldelas som inte finns i routes så kommer värdet att sättas om till "" och alla länkar att avmarkeras (om det inte finns en länk för route ""). I detta exempel kan man sätta om routen programmatiskt med hjälp av ett formulär.

<template>
    <div>
        <pre>selectedRoute: {{ selectedRoute }}</pre>
        <pre>availableRoutes: {{ availableRoutes }}</pre>
        <p>
            <input
                v-model="routeInput"
                v-validation.maxLength="{ maxLength: { length: 20 } }"
                type="text"
            />
            <button type="button" @click="selectedRoute = routeInput">Go to route</button>
        </p>
        <f-navigation-menu v-model:route="selectedRoute" :routes="routes"></f-navigation-menu>
    </div>
</template>

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

export default defineComponent({
    name: "FNavigationMenuActiveRoute",
    components: { FNavigationMenu },
    data() {
        return {
            /** @type {NavigationMenuItem[]} */
            routes: [
                { label: "label1", route: "ROUTE_1" },
                { label: "label2", route: "ROUTE_2" },
                { label: "label3", route: "ROUTE_3" },
                {
                    label: "label4",
                    route: "ROUTE_4",
                    href: "#f-navigation-menu-active-route-qwerty",
                },
                {
                    label: "label5",
                    route: "ROUTE_5",
                    href: "#f-navigation-menu-active-route-asdfgh",
                },
            ],
            selectedRoute: "ROUTE_2", // or this.route.path (from Vue router in setup)
            routeInput: "ROUTE_3",
        };
    },
    computed: {
        availableRoutes() {
            return this.routes.map((r) => r.route).join(", ");
        },
    },
});
</script>

Skärmläsare

Navigeringsmenyn innehåller två navigeringslandmärken: ett för menyn och ett för popup-menyn. Som standard är namnet i aria-label Navigeringsmeny för menyn och Popupmeny för popup-menyn. För att ändra dessa namn använd props menu-aria-label och popup-aria-label.

Se till att du använder tydliga namn som beskriver syftet för respektive navigering. Om flera navigeringsmenyer eller nav-element används samtidigt, se till att de alla har unika namn.

API

Props
Name	Description	Type	Required	Default
v-model	Current route.	string	false	""
routes	The route items to be diplayed in the menu	NavigationMenuItem[]	true	‐
vertical	If true, show the menu vertically	boolean	false	false
selectedMenuItemScreenReaderText	Screen reader text for selected item	string	false	""
menuMoreScreenReaderText	Screen reader text for the more menu item	string	false	""
menuMoreWithSelectedItemsScreenReaderText	Screen reader text for the more menu with selected items	string	false	""
menuAriaLabel	Unique accessible name for navigation landmark in menu.	string	false	"Navigeringsmeny"
popupAriaLabel	Unique accessible name for navigation landmark in popup.	string	false	"Popupmeny"

Events
Name	Description	Properties
selectedRoute	Event that is dispatched when a menu item is selected, for example, by clicking on the item. In most use cases the event payload is used to call Vue `router.push()` from the consumer code.	route: string
update:route	V-model event to update route property.	route: string