Links
Benodigde stappen:
- Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
- Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
- Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden.
Voorbeelden:
Visueel voorbeeld:
Basis Met::before Met ::afterKat icoon Hover :hover Hover met ::before:hover Hover met ::before:hover Actieve link Actieve link met icoon Actieve link met icoon achteraan Actieve link op hover Actieve link met icoon op hover Actieve link met icoon achteraan op hover Link gefocust Link gefocust met icoon Link gefocust met icoon achteraan Link gefocust op hover Link gefocust met icoon op hover Link gefocust met icoon achteraan op hover Bezochte link Bezochte link met icoon Bezochte link met icoon achteraan Bezochte link op hover Bezochte link met icoon op hover Bezochte link met icoon achteraan op hover Externe link HTML-voorbeeld:
Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Aandachtspunten:
- De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/links";Instelbare variabelen
Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in
combinatie met de class horizotal-view.
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --link-background-color | background-color | transparent | - | links |
| --link-text-color | color | #2f2f9a | - | |
| --link-text-decoration | text-decoration | initial | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
--link-background-color: ;
--link-text-color: ;
--link-text-decoration: ;
/* State overrides */
/* Hover */
--link-hover-background-color: ;
--link-hover-text-color: ;
--link-hover-text-decoration: ;
/* Active */
--link-active-background-color: ;
--link-active-text-color: ;
--link-active-text-decoration: ;
/* Active Hover */
--link-active-hover-background-color: ;
--link-active-hover-text-color: ;
--link-active-hover-text-decoration: ;
/* Focus */
--link-focus-background-color: ;
--link-focus-text-color: ;
--link-focus-text-decoration: ;
/* Focus Hover */
--link-focus-hover-background-color: ;
--link-focus-hover-text-color: ;
--link-focus-hover-text-decoration: ;
/* Visited */
--link-visited-background-color: ;
--link-visited-text-color: ;
--link-visited-text-decoration: ;
/* Visited hover */
--link-visited-hover-background-color: ;
--link-visited-hover-text-color: ;
--link-visited-hover-text-decoration: ;
/* visited active */
--link-visited-active-background-color: ;
--link-visited-active-text-color: ;
--link-visited-active-text-decoration: ;
/* Icon */
--link-icon-font-family: ;
--link-icon-font-size: ;
--link-icon-padding-right: ;
--link-icon-padding-left: ;
/* Icon at the end */
--link-icon-after-padding-right: ;
--link-icon-after-padding-left: ;
/* Visited icon hover */
--link-visited-icon-hover-background-color: ;
--link-visited-icon-hover-text-color: ;
--link-visited-icon-hover-text-decoration: ;
/* External Icon */
--link-external-icon-font-family: ;
--link-external-icon-font-size: ;
--link-external-icon-padding-right: ;
--link-external-icon-padding-left: ;
--link-external-icon: ;
}