Le widget extensible utilise l'élément personnalisé <devsite-expandable> pour indiquer
les utilisateurs de masquer ou d'afficher des parties de contenu dans une section extensible Dans un format Markdown
, encapsulez l'élément personnalisé avec un élément HTML standard,
<section> ou <div>.
Section "Désactiver"
L'exemple suivant est encapsulé dans un élément personnalisé <devsite-expandable> qui est défini par défaut sur une position masquée. Son titre comporte un attribut class nommé
showalways
Cet en-tête s'affiche toujours
Ce paragraphe est masqué par défaut.
This code block within the custom element also defaults to a hidden
position.
Commande personnalisée
L'exemple suivant ajoute la classe expand-control à l'élément button de
L'élément personnalisé <devsite-expandable> pour développer et réduire la section
sans activer le bouton.
Développer une fois
L'exemple suivant ajoute la classe expand-control once à un lien dans l'élément personnalisé <devsite-expandable> qui affiche du contenu supplémentaire lorsqu'il est cliqué, puis disparaît de la page.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Plus…Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Développement automatique lors de l'association
L'exemple suivant ajoute un ID #sample1 à l'élément personnalisé <devsite-expandable> qui développe automatiquement la section au chargement de la page lorsque vous y créez un lien.
Développer automatiquement lors de l'association
Fermez cette section extensible, cliquez sur le lien #sample1 ci-dessus, puis actualisez la page pour qu'elle se développe automatiquement.
Code block within the 'Auto-expand on linking' demo.
Ouvrir par défaut
L'exemple suivant ajoute l'attribut expanded au
Élément personnalisé <devsite-expandable> pour que l'annonce extensible s'ouvre par défaut.
Agrandissement par défaut
L'ouverture par défaut est idéale lorsque vous avez de nombreux éléments extensibles, comme pour les notes de version, mais que vous souhaitez conserver le plus récent.