Statut
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-card>
<h1 slot="header">Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<dsa-button slot="footer">Bouton</dsa-button>
<dsa-button slot="footer" variant="tertiary">
Bouton
</dsa-button>
<dsa-button slot="footer" variant="secondary">
Bouton
</dsa-button>
<dsa-button slot="footer" variant="primary">
Bouton
</dsa-button>
</dsa-card>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/card/card.js'
import '@ds-autonomie/web-components/dist/components/button/button.js'
import type { DSACard, DSAButton } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant menu
import { Component } from '@angular/core';
import type { DSACard, DSAButton } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/card/card.js'
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-card>
<h1 slot="header">Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<dsa-button slot="footer">Bouton</dsa-button>
<dsa-button slot="footer" variant="tertiary">
Bouton
</dsa-button>
<dsa-button slot="footer" variant="secondary">
Bouton
</dsa-button>
<dsa-button slot="footer" variant="primary">
Bouton
</dsa-button>
</dsa-card>
app.component.html
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 |
|
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 |
- |
|
href |
Si cet attribut est défini, l'en-tête de la carte sera un lien, avec une zone de clic couvrant toute la carte. Le nom accessible provenant de l'en-tête de la carte, n'oubliez pas d'ajouter un slot header lorsque vous souhaitez une carte lien. |
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 |
|
|
target |
Indique au navigateur où ouvrir le lien. Seulement utilisé lorsque href est présent |
_blank _parent _self _top |
- |