Hopp til innhold

Contextual­Menu

En kontekstuell meny lar brukeren utføre handlinger relatert til deler av innholdet på en side, men som ikke er sentrale for oppgaven brukeren holder på med.

EksemplerBrukDesignKode

Kom i gang

Installer
npm i @fremtind/jkl-contextual-menu-react
Bruk
import { ContextualMenu } from "@fremtind/jkl-contextual-menu-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-contextual-menu/contextual-menu.min.css";

import "@fremtind/jkl-icons/icons.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-contextual-menu/contextual-menu";

@use "@fremtind/jkl-icons/icons";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

ContextualMenu
Egenskaper
isOpen
Visning
Tema
Tetthet
<ContextualMenu

  initialPlacement="bottom-start"

  isOpen={undefined}

  keepOpenOnClickOutside={false}

  triggerElement={

    <IconButton title="En kontekstuell meny med eksempelvalg for å demonstrere mulighetene i komponenten">

      <DotsIcon bold />

    </IconButton>

  }

>

  <ContextualMenuItem icon={<InfoIcon />}>Menyvalg 1</ContextualMenuItem>

  <ContextualMenuItem onClick={() => console.log("Hei fra Menyvalg 2")}>

    Menyvalg 2

  </ContextualMenuItem>

  <ContextualMenuDivider />

  <ContextualMenu

    openOnHover

    triggerElement={

      <ContextualMenuItem expandable>

        Ekspanderende menyvalg med veldig lang tekst

      </ContextualMenuItem>

    }

  >

    <ContextualMenuItem icon={<InfoIcon />}>

      Ekspandert menyvalg

    </ContextualMenuItem>

    <ContextualMenuItem>Ekspandert menyvalg med mer tekst</ContextualMenuItem>

  </ContextualMenu>

  <ContextualMenu

    openOnHover

    triggerElement={

      <ContextualMenuItem expandable>Ekspanderende menyvalg</ContextualMenuItem>

    }

  >

    <ContextualMenuItem icon={<CopyIcon />}>

      Ekspandert menyvalg

    </ContextualMenuItem>

    <ContextualMenuItem>Ekspandert menyvalg med mer tekst</ContextualMenuItem>

  </ContextualMenu>

</ContextualMenu>

React API

Her finner du en oversikt over props på komponentene i pakken.