Balise details fermée

Questions ou commentaires?

Objectif

Garder les éléments details sélectionnés fermés sur une fenêtre définie et en dessous. Si aucun écran n'a été défini, l'écran par défaut est petit.

Exemple fonctionnel

Évaluation et rapport

Aucune évaluation ni rapport n'est disponible pour ce composant.

Comment l'implémenter

  1. Ajoutez la classe CSS wb-details-close à tout élément <details> que vous souhaitez fermer sur un point de rupture défini et des points de rupture plus petits.
  2. Optionnellement, ajoutez l'attribut data-breakpoint avec l'une des valeurs suivantes, et l'élément <details> restera fermé sur ce point de rupture et les points de rupture plus petits (par défaut est "sm") :
    • xxs
    • xs
    • sm
    • md
    • lg

Configuration

Nom de la propriété Type Description Valeurs
[data-breakpoint] String Définit la fenêtre maximale à partir de laquelle l'élément <details> est fermé. xxs, xs, sm, md, lg

Fonction

Type de fonction Nom Comment l'implémenter Ce qu'elle fait
Événement jQuery wb-init.wb-details-close Déclenché manuellement (par exemple, $( ".wb-details-close" ).trigger( "wb-init.wb-details-close" );). Initialise le plugiciel details-close. Ce plugiciel sera initialisé automatiquement sauf si l'élément .wb-details-close est ajouté après le chargement de la page et que wet-boew a été initialisé.
Événement jQuery wb-ready.wb-details-close Déclenché automatiquement après l'initialisation du plugiciel. Utilisé pour identifier quand et où le plugiciel est initialisé (cible de l'événement). 
$( document ).on( "wb-ready.wb-details-close", ".wb-details-close", function( event ) {
});
$elm.on( "wb-ready.wb-details-close", function( event ) {
});

Code source

Code source des détails fermés sur mobile sur GitHub

Date de modification :