Natural Preference for Minification
Miss any of our Open RFC calls?Watch the recordings here! »

@fremtind/jkl-toggle-switch-react

2.3.14 • Public • Published

@fremtind/jkl-toggle-switch-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

Lær hvordan du kan ta i bruk Jøkul

Bruk av React-pakken

Installasjon

  1. Installér pakken med yarn add @fremtind/jkl-toggle-switch-react eller npm i @fremtind/jkl-toggle-switch-react. Stil-pakken blir automatisk installert som en avhengighet.

  2. Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:

import { ToggleSwitch } from "@fremtind/jkl-toggle-switch-react";
import "@fremtind/jkl-toggle-switch/toggle-switch.min.css";

Bruk

Som standard blir ToggleSwitch fremvist som en komponent tiltenkt lys bakgrunn, men skal bryteren brukes på mørk bakgrunn kan man ta i bruk prop-en inverted.

<ToggleSwitch>
    Switch1
</ToggleSwitch>
<ToggleSwitch inverted>
    Switch2
</ToggleSwitch>

ToggleSwitch brukes som en kontrollert komponent gjennom prop-en pressed og en onClick-handler som tar et MouseEvent som første argument:

const [darkmodeIsOn, setDarkmodeIsOn] = useState(false);
 
<ToggleSwitch pressed={darkmodeIsOn} onClick={() => setDarkmodeIsOn(!darkmodeIsOn)}>
    Darkmode
</ToggleSwitch>;

Skal bryteren være deaktivert legges prop-en disabled til. Hvis det ønskes at bruker skal bli gjort oppmerksom på hvorfor bryteren er deaktivert benyttes prop-en helpLabel.

<ToggleSwitch disabled helpLabel="Du har ikke tilgang til darkmode>
    Darkmode
</ToggleSwitch>

Props

Komponenten tar i bruk følgende props:

  • children: Påkrevd. Etiketten til bryteren. ReactNode
  • pressed: Angir om bryterens status er av/på. boolean
  • className: Eventuell(e) css-klassenavn for komponenten. string
  • onClick: Angir funksjon for å håndtere endring i verdi. Får en MouseEvent som første argument.
  • disabled: Angir om bryteren er deaktivert. boolean
  • inverted: Angir om bryteren skal bruke inverterte farger (til mørke bakgrunner). boolean
  • helpLabel: Hjelpetekst som vises under bryterne. string

Install

npm i @fremtind/jkl-toggle-switch-react

DownloadsWeekly Downloads

63

Version

2.3.14

License

MIT

Unpacked Size

14.8 kB

Total Files

11

Last publish

Collaborators

  • avatar
  • avatar