Statut
Component checklist
Usage
Exemples d'intégration de la liste déroulante sur différents framework:
<dsa-dropdown id="dropdown">
<dsa-button slot="trigger" caret>Dropdown</dsa-button>
<dsa-menu-navigation>
<dsa-menu-item type="link" href="#">Lien 1</dsa-menu-item>
<dsa-menu-item type="link" href="#">Lien 2</dsa-menu-item>
<dsa-menu-item type="link" href="#">Lien 3</dsa-menu-item>
</dsa-menu-navigation>
</dsa-dropdown>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/dropdown/dropdown.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
import '@ds-autonomie/web-components/dist/components/menu-navigation/menu-navigation.js'
import '@ds-autonomie/web-components/dist/components/menu-item/menu-item.js'
import type { DSADropdown, DSAButton, DSAMenuNavigation, DSAMenuItem } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSADropdown>('#dropdown')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant bouton de liste déroulante.
import { Component } from '@angular/core';
import type { DSADropdown, DSAButton, DSAMenu, DSAMenuItem } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/dropdown/dropdown.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
import '@ds-autonomie/web-components/dist/components/menu/menu.js'
import '@ds-autonomie/web-components/dist/components/menu-item/menu-item.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
const inputEl = document.querySelector<DSADropdown>('#dropdown')
if (inputEl !== null) {
console.log(inputEl.value)
}
}
}
app.component.ts
<dsa-dropdown id="dropdown">
<dsa-button slot="trigger" caret>Dropdown</dsa-button>
<dsa-menu>
<dsa-menu-item>Item 1</dsa-menu-item>
<dsa-menu-item>Item 2</dsa-menu-item>
<dsa-menu-item>Item 3</dsa-menu-item>
</dsa-menu>
</dsa-dropdown>
app.component.html
API
Attributs et propriétés
|
attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
closePanelOnClick close-panel-on-click |
Fermer automatiquement le dropdown au clic sur le panneau |
boolean |
false |
|
containingElement |
La liste déroulante se fermera lorsque l'utilisateur interagira en dehors de cet élément (par exemple en cliquant). Cette propriété est utile pour composer d'autres composants qui utilisent une liste déroulante |
HTMLElement | undefined |
- |
|
disabled |
Désactive le champ de saisie |
boolean |
false |
|
hoist |
Activez cette option pour éviter que le panneau ne soit coupé lorsque le composant est placé à l'intérieur d'un conteneur avec overflow : scroll|auto. Hoisting utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux cas, mais pas dans tous |
boolean |
false |
|
open |
Indique si la dropdown est ouverte ou non. Utiliser cet attribut pour afficher ou cacher le dropdown, ou utiliser les propriétés show() et hide() |
boolean |
false |
|
placement |
Le placement privilégier du panneau de dropdown. As savoir que le placement peux varier en fonction des besoins pour afficher le panneau à l'intérieur du viewport |
top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end |
bottom-start |
|
skidding |
Le décalage en pixels entre le panneau et son trigger |
number |
0 |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache le panneau du dropdown |
Promise<void> |
|
reposition() |
Ordonne le repositionnement du panneau. Cette propriété est utile lorsque la position ou la taille du trigger change et que le panneau est ouvert |
void |
|
show() |
Affiche le panneau du dropdown |
Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(defaut) |
Le contenu principale du dropdown, généralement un dsa-menu |
|
trigger |
Le déclencheur du dropdown, généralement un dsa-button |
Références
Voici la liste des références vers les composants liés :