Pagina-notificatie systeembericht voorbeeld
Voor het weergeven van notificaties op paginaniveau.
Voorbeelden
Visueel voorbeeld:
Voor het voorbeeld zie bovenaan deze pagina.
HTML-voorbeeld:
section
<p class="system" role="group" aria-label="systeembericht"><span>Systeembericht:</span> Lorem ipsum dolor sit.</p>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/notification";
@use "@minvws/manon/notification-system-message";
@use "@minvws/manon/notification-system-page";Instelbare variabelen
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --notification-system-page-background-color | background-color | var(--system-background-color) | - | system |
| --notification-system-page-text-color | color | var(--system-text-color) | - | |
| --notification-system-page-border-width | border-width | var(--notification-border-width) | - | |
| --notification-system-page-border-style | border-style | var(--notification-border-style) | - | |
| --notification-system-page-border-color | border-color | var(--system-border-color) | - | |
| --notification-system-page-padding-top | padding-top | 0.5rem | - | |
| --notification-system-page-padding-right | padding-right | var(--page-whitespace-right) | - | |
| --notification-system-page-padding-bottom | padding-bottom | 0.5rem | - | |
| --notification-system-page-padding-left | padding-left | var(--page-whitespace-left) | - | |
| --notification-system-page-gap | gap | 0.5rem | - | |
| --notification-system-page-span-font-weight | span-font-weight | var(--notification-span-font-weight) | - | |
| --notification-system-pagecontent-wrapper-padding-top | padding-top | 0.5rem | - | |
| --notification-system-pagecontent-wrapper-padding-right | padding-right | var(--content-padding-right) | - | |
| --notification-system-pagecontent-wrapper-padding-bottom | padding-bottom | 0.5rem | - | |
| --notification-system-pagecontent-wrapper-padding-left | padding-left | var(--content-padding-left) | - | |
| --notification-system-pagecontent-wrapper-gap | gap | 0.5rem | - | |
| --notification-system-pagecontent-wrapper-span-font-weight | font-weight | 0.5rem | - | |
| --notification-system-page-icon-font-family | font-family | var(--notification-icon-font-family) | - | |
| --notification-system-page-icon-font-size | font-size | var(--notification-icon-font-size) | - | |
| --notification-system-page-icon-text-color | color | var(--notification-icon-text-color) | - | |
| --notification-system-page-icon-padding-right | padding-right | var(--notification-icon-padding-right) | - | |
| --notification-system-page-icon-padding-left | padding-left | var(--notification-icon-padding-left) | - | |
| --notification-system-page-icon-margin-right | margin-right | var(--notification-icon-margin-right) | - | |
| --notification-system-page-icon | content | var(--notification-icon) | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
--notification-system-page-background-color: ;
--notification-system-page-text-color: ;
--notification-system-page-border-width: ;
--notification-system-page-border-style: ;
--notification-system-page-border-color: ;
--notification-system-page-padding-top: ;
--notification-system-page-padding-right: ;
--notification-system-page-padding-bottom: ;
--notification-system-page-padding-left: ;
--notification-system-page-gap: ;
/* First span */
--notification-system-page-span-font-weight: ;
/* Content wrapper */
--notification-system-page-content-wrapper-padding-top: ;
--notification-system-page-content-wrapper-padding-right: ;
--notification-system-page-content-wrapper-padding-bottom: ;
--notification-system-page-content-wrapper-padding-left: ;
--notification-system-page-content-wrapper-gap: ;
/* First span */
--notification-system-page-content-wrapper-span-font-weight: ;
/* Icon */
--notification-system-page-icon-font-family: ;
--notification-system-page-icon-font-size: ;
--notification-system-page-icon-text-color: ;
--notification-system-page-icon-padding-right: ;
--notification-system-page-icon-padding-left: ;
--notification-system-page-icon-margin-right: ;
--notification-system-page-icon: ;
}