L'API Popover arriva nella base di riferimento

Una Kravets

È arrivato il momento: Una delle funzionalità per cui ho più hype è disponibile da poco su tutti i browser moderni e fa ufficialmente parte di Baseline 2024. Questa funzionalità è l'API Popover. Popover offre tantissime primitive e incentivi per gli sviluppatori per creare interfacce a più livelli come descrizioni comando, menu, UI per l'insegnamento e altro ancora.

Ecco alcune brevi funzionalità dei popover:

• Passa al livello superiore. I popover verranno visualizzati nel livello superiore sopra il resto della pagina, così non dovrai giocare con z-index.
• Funzionalità per ignorare facilmente. Se fai clic all'esterno dell'area popover, il popover verrà chiuso e ripristinerà lo stato attivo.
• Gestione predefinita dello stato attivo. Se apri il popover, la scheda successiva si ferma all'interno del popover.
• Associazioni da tastiera accessibili. Se premi il tasto esc o attivi/disattivi due volte, il popover si chiuderà e ripristinerà lo stato attivo.
• Associazioni di componenti accessibili. Connessione di un elemento popover a un trigger popover semanticamente.

Creazione di popover

La creazione di popover è piuttosto semplice. Per utilizzare i valori predefiniti, è sufficiente un button per attivare il popover e un elemento da attivare.

• Innanzitutto, imposta un attributo popover nell'elemento che sarà il popover.
• A questo punto, aggiungi un id univoco all'elemento popover.
• Infine, per collegare il pulsante al popover, imposta il valore popovertarget del pulsante sul valore id dell'elemento popover.

Ciò viene mostrato nel seguente codice:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Per avere un controllo più granulare sui popover, puoi impostare esplicitamente i tipi di popover. Ad esempio, l'utilizzo di un attributo popover semplice senza valore è uguale a popover="auto". Il valore auto consente il comportamento di ignorare la luce e chiude automaticamente altri popover. Utilizza popover="manual" e dovrai aggiungere un pulsante di chiusura. I popover manuali non chiudono altri popover e non consentono agli utenti di ignorarli facendo clic all'esterno dell'interfaccia utente. Per creare un popover manuale, procedi come segue:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Popover e finestra di dialogo modale

Forse ti starai chiedendo se hai bisogno di un popover quando esiste una finestra di dialogo e la risposta è: forse no.

È importante notare che l'attributo popover non fornisce automaticamente la semantica. Anche se ora puoi creare esperienze in stile dialogo modale utilizzando i popover, ci sono alcune differenze fondamentali tra i due:

Conclusioni e ulteriori approfondimenti

popover offre molte funzionalità entusiasmanti sulla piattaforma. Per ulteriori informazioni su questa API, comprese informazioni sull'accessibilità della funzione e la documentazione relativa all'insieme di funzionalità, di seguito sono riportate alcune letture consigliate:

• Semantica e attributo popover: cosa utilizzare quando? di Hidde de Vries
• Informazioni sull'accessibilità dei popover: cosa fa e non il browser secondo Hidde de Vries
• Documentazione MDN sui popover