Website Tracker SDK | copernica.ui

De copernica.ui variabele bevat een object met diverse UI-functies die gebruikt kunnen worden om interactieve elementen op een webpagina te tonen, zoals popovers, drawers en slides. Deze module is oorspronkelijk bedoeld voor intern gebruik door Copernica zelf, met name voor het tonen van formulieren. Maar je kunt de functies ook zelf aanroepen om op een consistente manier UI-elementen aan je website toe te voegen, die op dezelfde manier verschijnen als Copernica-formulieren.

Beschikbare functies

De copernica.ui module bestaat uit meerdere losse functies, waaronder:

• copernica.ui.popover()
• copernica.ui.drawer()
• copernica.ui.slide()

Elke functie heeft een eigen gedrag en eigen configuratie-opties.

Voorbeeld

Onderstaand voorbeeld toont een eenvoudige popover met eigen HTML:

copernica.ui.popover({
    html: '<div>Hello world</div>',
    position: 'center',
    overlay: true
});

Popover

Gebruik copernica.ui.popover() voor compacte overlays of meldingen.

Opties

• html: de inhoud van de popover. Dit kan eigen HTML zijn of bijvoorbeeld een iframe.
• position: 'center', 'top-left', 'top-right', 'bottom-left', 'bottom-right' (standaard: 'center').
• overlay: wanneer deze optie op true staat, wordt een achtergrond-overlay getoond.

Drawer

Gebruik copernica.ui.drawer() voor een uitschuifbaar element vanaf de rand van het scherm

Opties

• html: de inhoud van de drawer.
• position: 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' (standaard: 'bottom-right').
• overlay: wanneer deze optie op true staat, wordt een achtergrond-overlay getoond.

Slide

Gebruik copernica.ui.slide() voor een vast element aan de rand van het scherm.

Opties

• html: de inhoud van de slide.
• position: 'left', 'right', 'top', 'bottom' (standaard: 'right').
• overlay: wanneer deze optie op true staat, wordt een achtergrond-overlay getoond.

Gebruik in de praktijk

De copernica.ui module wordt intern gebruikt om bijvoorbeeld Copernica formulieren te tonen. Door dezelfde functies te gebruiken in je eigen implementatie, kun je aansluiten op dit gedrag en dezelfde gebruikerservaring creëren.

Dit is met name handig wanneer je:

• externe formulieren wilt tonen, bijvoorbeeld via een iframe
• zelf UI-interacties wilt bouwen die aansluiten op Copernica
• snel popups of panelen wilt tonen zonder eigen UI-componenten te bouwen