Modal dialogruta
Använd modala dialogrutor för korta interaktioner som är en del av ett flöde. Modaler kan användas för att låta användaren bekräfta ett val, för att förmedla information eller för enkel inmatning.
Använd inte modala dialogrutor för att presentera felmeddelanden eller information som användaren behöver kunna läsa under tiden som hen åtgärdar ett fel eller gör ändringar.
- I de flesta fall där användaren måste uppmärksammas på viktig information eller problem är en meddelanderuta att föredra.
- Rubriken har tabb-fokus när en modal dialogruta öppnas. Därefter knapparna i den ordning de presenteras och sist stängknappen. Tabb-fokus loopar genom alla klickbara ytor i en modal.
- Öppna inte ytterligare en modal från en modal.
Modala dialogrutor finns i fyra varianter:
- standard
- information
- varning
- fel.
Storlek
Modalens höjd anpassas utifrån innehållet. I desktop (>639px) kan modalens bredd anpassas till
small(standard)mediumlargefullwidth.
I mobil (<640px) har en modal alltid samma bredd, men det går att sätta en modal till fullskärm. Använd fullskärm när användaren ska fokusera på en deluppgift i ett flöde, till exempel används fullskärm av formulärsmodalen. Använd inte fullskärm för modala dialogrutor som visas som en reaktion på något användaren gör.
Använd size-prop för att välja storlek på modalen.
-<f-modal>
+<f-modal size="small">
För mobil finns det en fullscreen-prop för att säkerställa att modal täcker hela skärmen och är utan ram.
Den här fullscreen-propen påverkar inte modalen i desktop-läge.
-<f-modal size="medium">
+<f-modal size="medium" fullscreen>
Anpassa storlek
Implementera en CSS-klass enligt följande:
.my-fancy-modal {
max-width: 500px;
}
Använd inte size-prop utan lägg istället till din klass direkt enligt class="..":
-<f-modal size="small">
+<f-modal class="my-fancy-modal">
Initialt fokus
När modalen öppnas så sätts initialt fokus enligt denna rangordning:
- Rubrik
- Första interagerbara element i innehåll
- Hela innehållet
API
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
id | The id for the root element id attribute. | string | false | () => ElementIdService.generateElementId() |
isOpen | If the modal is open. | boolean | false | false |
ariaCloseText | The aria-label attribute text for the top right close button. | string | false | undefined |
fullscreen | Enable fullscreen mode in mobile. | boolean | false | false |
type | The type of modal. 'information', 'warning' and 'error' is valid. | string | false | "" |
size | The size of modal in desktop mode. | string | false | "" |
| Name | Description | Properties |
|---|---|---|
close | Event that is dispatched when the escape button is pressed. | ‐ |
| Name | Description | Bindings |
|---|---|---|
header | Slot for the header. | ‐ |
content | Slot for the main content, e.g. paragraphs, input fields, etc. | ‐ |
footer | Slot the footer content, i.e. buttons. | ‐ |