Toastmeldingen maken

Toastmeldingen zijn tijdelijke statusberichten. In tegenstelling tot menu's mogen ze niet worden gesloten als een gebruiker interactie heeft met andere delen van de pagina. De status popover="manual" is ideaal omdat deze geen gedrag voor licht sluiten heeft en meerdere meldingen naast elkaar kunnen bestaan.

Implementatierichtlijnen

• VERPLICHT: Gebruik popover="manual" zodat de melding zichtbaar blijft totdat deze expliciet wordt gesloten of een script een time-out veroorzaakt.
• Gebruik WEL een container om de stapeling van meerdere toasts te beheren. Omdat pop-overs in de bovenste laag de z-index van het bovenliggende element negeren, moet je ze afzonderlijk of binnen een gemeenschappelijke opmaakgroep positioneren.
• Gebruik WEL sibling-index() om een marge tussen toastmeldingen toe te voegen, zodat items lager in de stapel zichtbaar zijn.
• WEL: Voeg een expliciete knop Sluiten toe aan de toast met popovertargetaction="hide".
• WEL: Gebruik JavaScript voor timers voor automatisch sluiten (bijvoorbeeld door hidePopover() aan te roepen na 3000 ms).
• WEL: Gebruik transition-behavior: allow-discrete om de binnenkomst en het vertrek uit de bovenste laag te animeren.

Reservestrategieën

Fallbacks en browserondersteuning voor Popover

De Popover API is voornamelijk progressive enhancement, maar de bepalende gedragingen (promotie van de bovenste laag, licht sluiten en aanroepen van popovertarget) hebben geen equivalent dat alleen CSS gebruikt. Oudere browsers hebben een polyfill nodig, of een handmatige fallback als je er liever geen verzendt.

Polyfill: Als je het kenmerk popover wilt ondersteunen in oudere browsers, laad je @oddbird/popover-polyfill voorwaardelijk. VERPLICHT: Voer een functiedetectie uit door te controleren op de property popover op HTMLElement.prototype en laad de polyfill alleen als systeemeigen ondersteuning ontbreekt. Laad de polyfill NIET onvoorwaardelijk.

Met een bundler of importtoewijzing:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Zonder bundler importeer je vanuit een CDN in een <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Opmerking over de stijl: De polyfill kan de echte pseudoklasse :popover-open niet definiëren, dus wordt in plaats daarvan de klasse .\:popover-open toegepast. VERPLICHT: Combineer de 2 met :is() of :where(), anders negeren browsers zonder :popover-open de hele regel:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Als alternatief kun je voor een verouderde fallback zonder polyfill position: fixed gebruiken en de coördinaten handmatig berekenen via getBoundingClientRect() of vertrouwen op de standaardpositionering met inset: auto als dat acceptabel is voor de use case.

sibling-index()

• Richtlijn: Als sibling-index() niet wordt ondersteund, gebruik je de operator + om handmatig een marge toe te voegen. Bijvoorbeeld popover + popover { margin-top: 1rem }

ankerpositionering

• Advies: Gebruik de CSS Anchor Positioning Polyfill. Voor een niet-polyfill-fallback stel je de tooltip standaard in op een vaste positie onderaan het kijkvenster met @supports not (anchor-name: --foo).

transition-behavior

• Richtlijn: Als transition-behavior niet wordt ondersteund, gebruik je JavaScript om animatie toe te voegen via klassen terwijl het toast-element in- en uitgaat.