Composant Boîte Combo GC
Un composant combo-box accessible qui met en œuvre les normes d'accessibilité WCAG 2.1 et offre une interface moderne et conviviale pour sélectionner plusieurs éléments dans une liste déroulante. Ce composant prend en charge la sélection multiple, la navigation au clavier et le support complet des lecteurs d'écran.
Exemple 1 : Options provenant d'une API avec étiquette dans un slot
Visualiser le code
<gc-combobox
placeholder="Région(s)..."
name="regions"
options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/fr/regions">
<span slot="label">Région(s)</span>
</gc-combobox>Exemple 2 : Options provenant d'un slot
Visualiser le code
<gc-combobox placeholder="Fruit(s)..." name="fruits">
<span slot="label">Fruit(s)</span>
<select slot="options">
<option value="apple">Pomme</option>
<option value="banana">Banane</option>
<option value="orange">Orange</option>
<option value="grape">Raisin</option>
</select>
</gc-combobox>Exemple 3 : Étiquette en tant qu'attribut (pas un slot)
Visualiser le code
<gc-combobox
placeholder="Institution(s)..."
name="institutions-attr"
label="Institution(s)"
options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/fr/institutions"></gc-combobox>Exemple 4 : Sans espace réservé
Visualiser le code
<gc-combobox
name="institutions"
options="https://api.io.canada.ca/io-server/gc/news/institutions-and-regions-tags/v1/fr/institutions">
<span slot="label">Institution(s)</span>
</gc-combobox>Exemple 5 : Fichier JSON statique fourni
Visualiser le code
<gc-combobox placeholder="Institution(s)..." name="institutions-json" options="institutions.json">
<span slot="label">Institution(s)</span>
</gc-combobox>Exemple 6 : Avec l'option Sélectionner tout activée
Visualiser le code
<gc-combobox placeholder="Fruit(s)..." name="fruits-select-all" select-all-options>
<span slot="label">Fruit(s)</span>
<select slot="options">
<option value="apple">Pomme</option>
<option value="banana">Banane</option>
<option value="orange">Orange</option>
<option value="grape">Raisin</option>
</select>
</gc-combobox>Exemple 7 : Tests d'API publique
Visualiser le code
<gc-combobox id="demo-api" placeholder="Fruit(s)..." name="fruits-api">
<span slot="label">Fruit(s)</span>
<select slot="options">
<option value="apple">Pomme</option>
<option value="banana">Banane</option>
<option value="orange">Orange</option>
<option value="grape">Raisin</option>
<option value="mango">Mangue</option>
</select>
</gc-combobox>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
<button type="button" onclick="console.log('getSelectedValues:', document.getElementById('demo-api').getSelectedValues())">getSelectedValues()</button>
<button type="button" onclick="console.log('getSelectedOptions:', document.getElementById('demo-api').getSelectedOptions())">getSelectedOptions()</button>
<button type="button" onclick="document.getElementById('demo-api').selectOption('apple')">selectOption("apple")</button>
<button type="button" onclick="document.getElementById('demo-api').removeTag('apple')">removeTag("apple")</button>
<button type="button" onclick="document.getElementById('demo-api').setSelectedOptions([{value:'banana',label:'Banane'},{value:'grape',label:'Raisin'}])">setSelectedOptions([banane, raisin])</button>
<button type="button" onclick="document.getElementById('demo-api').selectAll()">selectAll()</button>
<button type="button" onclick="document.getElementById('demo-api').unselectAll()">unselectAll()</button>
<button type="button" onclick="document.getElementById('demo-api').setOptions([{value:'chat',label:'Chat'},{value:'chien',label:'Chien'},{value:'oiseau',label:'Oiseau'}])">setOptions([chat, chien, oiseau])</button>
</div>
<script>
document.getElementById( "demo-api" ).addEventListener( "change", function( e ) {
console.log( "événement change déclenché :", e.detail.selectedOptions );
} );
</script>Détails de la page
- Date de modification :