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

Prinsipper

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.

Når skal du bruke content toggle

  • 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 ikoner

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.