Statut
=
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-button id="button">Bouton</dsa-button>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/button/button.js'
import type { DSAButton } from '@ds-autonomie/web-components'
const buttonEl = document.querySelector<DSAButton>('#button')
if (buttonEl !== null) {
buttonEl.disabled = true
}
</script>
Code HTML à implémenter pour utiliser le composant bouton
import { Component } from '@angular/core';
import type { DSAButton } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/button/button.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-button id="button">Bouton</dsa-button>
app.component.html
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un libellé textuel alternatif au bouton pour une meilleure accessibilité. |
string |
- |
|
caret |
Affiche un bouton avec un caret. Il est utilisé pour indiquer qu'un bouton déclenche un menu déroulant ou similaire. Cette propriété est uniquement à utilisé dans un dsa-dropdown |
boolean |
false |
|
contrasted |
Affiche le bouton dans le style d'un menu contrasté. Lorsqu'il est à `false`, le bouton est affiché dans le style de base |
boolean
|
false |
|
description |
Fournit une description au bouton pour une meilleure accessibilité. |
string |
'' |
|
disabled |
Désactive le champ |
boolean |
false |
|
toggle |
Transforme le bouton en bouton à basculement (on/off). Fonctionne seulement avec le variant secondary |
boolean |
false |
|
pressed |
Définit l'état du bouton à basculement. Sa valeur n'est prise en compte que si toggle est à true. Lorsqu'une icône personnalisée est utilisée (via le slot prefix), elle doit être de type outlined lorsque pressed est à false et de type filled lorsque pressed est à true (modifiable via name). |
boolean |
false |
|
download |
Indique au navigateur que le lien est à télécharger plutôt que d'être affiché. La valeur, si spécifié est le nom du fichier à télécharger |
string |
- |
|
contrasted |
Affiche le bouton dans le style d'un menu contrasté. Lorsqu'il est à false , le bouton est affiché dans le style de base |
boolean |
false |
|
floating |
Affiche le bouton dans le style d'un menu flottant. Lorsqu'il est à false, le bouton est affiché dans le style de base |
boolean |
false |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
formAction formaction |
Utilisé pour surcharger l'attribut action du formulaire lié |
string |
- |
|
formEnctype formenctype |
Utilisé pour surcharger l'attribut enctype du formulaire lié |
application/x-www-form-urlencoded multipart/form-data text/plain |
- |
|
formMethod formmethod |
Utilisé pour surcharger l'attribut method du formulaire lié |
post get |
- |
|
formNoValidate formnovalidate |
Utilisé pour surcharger l'attribut novalidate du formulaire lié |
boolean |
- |
|
formTarget formtarget |
Utilisé pour surchager l'attribut target du formulaire lié |
_self _blank _parent _top string |
- |
|
href |
Si cet attribut est défini, le bouton est rendu en tant que <a> avec le href fourni |
string |
'' |
|
loading |
Affiche le bouton dans un état de chargement |
boolean |
false |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire uniquement si le bouton est le soumetteur. Cet attribut est ignoré quand href est présent |
string |
'' |
|
rel |
Lors de l'utilisation de href, cet attribut correspondra à l'attribut rel du lien sous-jacent. Contrairement aux liens ordinaires, la valeur par défaut est noreferrer noopener pour des raisons de sécurité. Cependant, si vous utilisez target pour pointer vers un onglet ou une fenêtre spécifique, cela empêchera le fonctionnement correct. Il faudra supprimer ou modifier la valeur par défaut avec une chaîne vide ou à une valeur de votre choix |
string |
|
|
size |
La taille du bouton |
small medium large |
medium |
|
target |
Indique au navigateur où ouvrir le lien. Seulement utilisé lorsque href est présent |
_blank _parent _self _top |
- |
|
type |
Le type du bouton. A noté que la valeur par défaut est button et non pas submit. Cela est l'opposé d'un <bouton> natif. Lorsque le type est submit, le bouton va soumettre le formulaire le plus proche |
button submit reset |
button |
|
value |
La valeur du contrôle, soumis sous la forme d'une paire nom/valeur avec les données du formulaire uniquement si le bouton est le soumetteur. Cet attribut est ignoré quand href est présent |
string |
'' |
|
variant |
La variante du champ de saisie |
primary secondary tertiary neutral danger tertiary-with-outline navigation
|
'primary' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
blur() |
Enlève le focus du champ |
() => void |
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
click()
|
Simule un click sur le bouton |
() => void |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
Slots
|
Nom |
Description |
|---|---|
|
(defaut) |
Le contenu principale. Un composant dsa-badge peut être ajouté, et sera affiché en haut à droite du bouton. |
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire au début du champ |
|
suffix |
Utilisé pour ajouter une icône de présentation ou un élément similaire à la fin du champ |
Événements
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le champ de saisie perd le focus |
|
dsa-focus |
Émis lorsque le champ de saisie obtient le focus
|
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du champ et que les contraintes ne sont pas respectées |
|
dsa-change |
Émis lorsque le bouton en mode basculement change d'état (non-pressé vers pressé et inversement) |