Pagina-notificatie toelichting voorbeeld
Voor het weergeven van notificaties op paginaniveau.
Voorbeelden
Visueel voorbeeld:
Voor het voorbeeld zie bovenaan deze pagina.
HTML-voorbeeld:
section
<p class="explanation" role="group" aria-label="toelichting"><span>Toelichting:</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-explanation-message";
@use "@minvws/manon/notification-explanation-page";Instelbare variabelen
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --notification-explanation-page-background-color | background-color | var(--explanation-background-color) | - | explanation |
| --notification-explanation-page-text-color | color | var(--explanation-text-color) | - | |
| --notification-explanation-page-border-width | border-width | var(--notification-border-width) | - | |
| --notification-explanation-page-border-style | border-style | var(--notification-border-style) | - | |
| --notification-explanation-page-border-color | border-color | var(--explanation-border-color) | - | |
| --notification-explanation-page-padding-top | padding-top | 0.5rem | - | |
| --notification-explanation-page-padding-right | padding-right | var(--page-whitespace-right) | - | |
| --notification-explanation-page-padding-bottom | padding-bottom | 0.5rem | - | |
| --notification-explanation-page-padding-left | padding-left | var(--page-whitespace-left) | - | |
| --notification-explanation-page-gap | gap | 0.5rem | - | |
| --notification-explanation-page-span-font-weight | span-font-weight | var(--notification-span-font-weight) | - | |
| --notification-explanation-pagecontent-wrapper-padding-top | padding-top | 0.5rem | - | |
| --notification-explanation-pagecontent-wrapper-padding-right | padding-right | var(--content-padding-right) | - | |
| --notification-explanation-pagecontent-wrapper-padding-bottom | padding-bottom | 0.5rem | - | |
| --notification-explanation-pagecontent-wrapper-padding-left | padding-left | var(--content-padding-left) | - | |
| --notification-explanation-pagecontent-wrapper-gap | gap | 0.5rem | - | |
| --notification-explanation-pagecontent-wrapper-span-font-weight | font-weight | 0.5rem | - | |
| --notification-explanation-page-icon-font-family | font-family | var(--notification-icon-font-family) | - | |
| --notification-explanation-page-icon-font-size | font-size | var(--notification-icon-font-size) | - | |
| --notification-explanation-page-icon-text-color | color | var(--notification-icon-text-color) | - | |
| --notification-explanation-page-icon-padding-right | padding-right | var(--notification-icon-padding-right) | - | |
| --notification-explanation-page-icon-padding-left | padding-left | var(--notification-icon-padding-left) | - | |
| --notification-explanation-page-icon-margin-right | margin-right | var(--notification-icon-margin-right) | - | |
| --notification-explanation-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-explanation-page-background-color: ;
--notification-explanation-page-text-color: ;
--notification-explanation-page-border-width: ;
--notification-explanation-page-border-style: ;
--notification-explanation-page-border-color: ;
--notification-explanation-page-padding-top: ;
--notification-explanation-page-padding-right: ;
--notification-explanation-page-padding-bottom: ;
--notification-explanation-page-padding-left: ;
--notification-explanation-page-gap: ;
/* First span */
--notification-explanation-page-span-font-weight: ;
/* Content wrapper */
--notification-explanation-page-content-wrapper-padding-top: ;
--notification-explanation-page-content-wrapper-padding-right: ;
--notification-explanation-page-content-wrapper-padding-bottom: ;
--notification-explanation-page-content-wrapper-padding-left: ;
--notification-explanation-page-content-wrapper-gap: ;
/* First span */
--notification-explanation-page-content-wrapper-span-font-weight: ;
/* Icon */
--notification-explanation-page-icon-font-family: ;
--notification-explanation-page-icon-font-size: ;
--notification-explanation-page-icon-text-color: ;
--notification-explanation-page-icon-padding-right: ;
--notification-explanation-page-icon-padding-left: ;
--notification-explanation-page-icon-margin-right: ;
--notification-explanation-page-icon: ;
}