Hoppa till huvudinnehåll

Modal

Modal, Dialog, Dialogruta
Version: 0.1.2
Versionslogg
Storybook
Referens

Introduktion​

Modaler lägger sig över allt annat innehåll för att fokusera användarens fokus på en sak.

Installation och användning​

npm install @midas-ds/modal
import { Modal, DialogTrigger, ModalHeader, ModalBody } from '@midas-ds/modal'

const [isOpened, setIsOpened] = React.useState<boolean>(false)

Avancerat innehåll​

Modaler kan även innehålla mer avancerat innehåll som ett formulär. Använd då autoFocus på första element för att användarens fokus ska flyttas dit när modalen öppnas.

Stänga modal​

I vår komponent <ModalHeader /> som du bör placera först innuti din modal ingår en knapp för att stänga modalen. Modaler kan även stängas med tangentbordet (esc). För att komma åt funktionen för att stänga modalen kan du antingen komma åt det via useContext eller via funktionen som kan används som direkt barn till <Modal>.

Funktionen close​

...
<Modal>
    {({close}) => (
        ...
        <Button
         onPress={close}
        >
            Stäng modal
        </Button>
        ...
    )}
</Modal>

useContext​

import { OverlayTriggerStateContext } from '@midas-ds/modal'

const CloseButton: React.FC () => {
    const state = React.useContext(OverlayTriggerStateContext)

    return (
        <Button
         onPress={state.close}
        >
            Stäng modal
        </Button>
    )
}
...
<Modal>
    <CloseButton />
</Modal>

Riktlinjer​

TBD

Beroenden​