Statut
Component checklist
Usage
<dsa-fieldset
legend-title="Coordonnées"
legend-subtitle"="Vos coordonnées seront utilisées pour vous contacter pour finaliser votre dossier."
>
<dsa-input
type="email"
label="Courriel"
autocomplete="email"
required
></dsa-input>
<dsa-input-phone
label="Numéro de téléphone"
autocomplete="tel"
></dsa-input-phone>
<dsa-tooltip
slot="tooltip"
content="Renseigner des coordonnées de contact"
placement="top"
distance="8"
skidding="0"
trigger="hover focus"
hoist
>
<dsa-icon-button
name="info"
label="Information complémentaire"
size="medium"
></dsa-icon-button
></dsa-tooltip>
</dsa-fieldset>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/fieldset/fieldset.js';
import '@ds-autonomie/web-components/dist/components/input/input.js';
import '@ds-autonomie/web-components/dist/components/input-phone/input-phone.js';
import '@ds-autonomie/web-components/dist/components/tooltip/tooltip.js';
import '@ds-autonomie/web-components/dist/components/icon-button/icon-button.js';
import type { DSAFieldset } from '@ds-autonomie/web-components'
</script>
API
Attributs et propriétés
Comment utiliser les attributs ? » Utilisation des webcomponents
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|
contrastedBorders contrasted-borders |
Augmentez le contraste des bordures dans les contextes où il pourrait être difficile d'identifier la carte. |
boolean |
false |
|
disabled |
Désactive les contrôles enfants |
boolean |
false |
|
horizontal |
Défini l'orientation des contrôles |
boolean |
false |
|
legendSubtitle legend-subtitle
|
Le sous-titre du fieldset |
string |
- |
|
legendTitle legend-title |
Le titre du fieldset |
string |
'' |
|
variant |
La variante du fieldset |
'layer' | 'base' |
'base' |
Méthodes
Comment utiliser les méthodes ? » Utilisation des webcomponents
Ce composant ne propose pas de méthodes.
Slots
Comment utiliser les slots ? » Utilisation des webcomponents
|
Nom |
Description |
|---|---|
|
(défaut) |
Les contrôles de formulaire |
|
legend-title |
Le titre du fieldset. Alternativement, vous pouvez utiliser l'attribut legend-title |
|
legend-subtitle |
Le sous-titre du fieldset. Alternativement, vous pouvez utiliser l'attribut legend-subtitle |
|
tooltip |
Texte qui permet de passer des informations additionnelles à coté du libellé |
Événements
Comment utiliser les événements ? » Utilisation des webcomponents
Ce composant n’émet pas d’événements.