Hopp til innhold

Content­Toggle

ContentToggle er en komponent for to av Jøkuls kjerneanimasjoner. Om du har behov for to tilstander som man veksler mellom, så er ContentToggle en måte å løse det på en elegant måte.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-content-toggle-react
Bruk
import { ContentToggle } from "@fremtind/jkl-content-toggle-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-content-toggle/content-toggle.min.css";



// Eller importer stilark via SCSS.

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

Live demo

Stateful ContentToggle
Egenskaper
Variant
Visning
Tema
Tetthet
const [showSecondary, setShowSecondary] = React.useState(false);



return (

  <>

    <ToggleSwitch onChange={(e, pressed) => setShowSecondary(pressed)}>

      Bytt verdi

    </ToggleSwitch>

    <ContentToggle

      className="jkl-spacing-l--top"

      showSecondary={showSecondary}

      variant={'flip'}

      secondary="World!"

    >

      Hello

    </ContentToggle>

  </>

);

Feilsøking

ContentToggle komponenten gjør sitt beste på å gjette hvor store elementene inni er, så den animerer riktig avstand. Det er basert på fontstørrelsen fra foreldrekomponenten (height settes med em-enheten). Så om du animerer jkl-lead, sørg for at den klassen er satt over ContentToggle komponenten.

I noen tilfeller så treffer den ikke helt. For å fortelle ContentToggle at den skal bevege seg mer eller mindre, så kan du overstyre height på ContentToggle elementet via className.

React API

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