Hopp til innhold

ContentToggle

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.

Hello

ContentToggle komponenten tar inn to React-komponenter. Det kan være tekststrenger eller sammensatte komponenter, men egner seg nok best til tekster kortere enn en setning, og enkeltkomponenter som én knapp.

Om du skal animere høyden til et element kan du bruke useAnimatedHeight.

Bruk

Eksempler på bruk:

  • Animere overgang fra Loader til innhold (tenk på varigheten her – unngå "flash of loader")
  • Veksle mellom visning av pris per år og per måned
  • Bytte fra ett ikon til et annet, som ikke er dekket av Icons (men del gjerne at det er et behov!)

Tilgjengelighet

Komponenten setter aria-hidden på elemetet som ikke synes for øyeblikket. Vi kan dessverre ikke sette hidden, siden vi er avhengige av at elementet har en høyde for at animasjonene skal fungere riktig.

Det betyr at du selv sørger for at interaktive elementer som knapper kan ikke nås med tastatur, ved å sette disabled-attributtet på komponenten.

Komponenten har også satt aria-live="polite" slik at innholdet vil leses opp av skjermleser når tilstanden endres. Om dette ikke passer for ditt bruk kan du overstyre det med props.

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.