Status
The component has a health status indicated
Component checklist
Usage
<dsa-radio-group label="Type de document" id="radioGroup">
<dsa-radio-card>
Word
<span slot="description">Description</span>
<img
slot="image"
alt=""
src="/Image_Placeholder.png"
width="43px"
height="100%"
style="object-fit: cover"
/>
</dsa-radio-card>
<dsa-radio-card>
PDF
<span slot="description">Description</span>
<img
slot="image"
alt=""
src="/Image_Placeholder.png"
width="43px"
height="100%"
style="object-fit: cover"
/>
</dsa-radio-card>
<dsa-radio-card>
Excel
<span slot="description">Description</span>
<img
slot="image"
alt=""
src="/Image_Placeholder.png"
width="43px"
height="100%"
style="object-fit: cover"
/>
</dsa-radio-card>
<dsa-radio-card>
Texte
<span slot="description">Description</span>
<img
slot="image"
alt=""
src="/Image_Placeholder.png"
width="43px"
height="100%"
style="object-fit: cover"
/>
</dsa-radio-card>
</dsa-radio-group>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/radio-group/radio-group.js';
import '@ds-autonomie/web-components/dist/components/radio-card/radio-card.js';
import type { DSARadioGroup, DSARadioCard } from '@ds-autonomie/web-components'
const el = document.querySelector<DSARadioGroup>('#radioGroup')
if (el !== null) {
console.log(el.value)
}
</script>
Code HTML à implémenter pour utiliser le composant bouton de case à cocher
API
Attributs et propriétés
|
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 le champ |
boolean |
false |
|
layout |
L'orientation de la disposition de la carte |
'horizontal'| 'vertical' |
'horizontal' |
|
readonly |
Rend le champ en lecture seule |
boolean |
false |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
value |
La valeur du contrôle. Le radio group reçoit la valeur lorsque celle-ci est sélectionnée |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
blur() |
Enlève le focus du champ |
() => void |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le libellé |
|
description |
Une description pour la carte |
|
image |
Une image optionnelle. Elle doit prendre 100% de la hauteur / largeur disponible en layout horizontal / vertical |