Statut
Component checklist
Usage
<dsa-card-nav style="width: 500px">
<img
slot="media"
alt=""
src="/dsa-bg.jpg"
style="height: 150px; object-fit: cover"
/>
<dsa-icon
slot="title-icon"
name="insert_photo"
></dsa-icon>
<h1
slot="title"
style="margin:0; font-size: inherit; font-weight: inherit"
>
Title lorem ipsum
</h1>
<p slot="subtitle" style="margin:0">Subtitle</p>
<dsa-card-nav-item>Card Nav Item with controls</dsa-card-nav-item>
<dsa-card-nav-item
href="https://dsa.service-public-autonomie.fr/latest/librairie-webcomponents/guide-d-utilisation-KQSkrPiI-KQSkrPiI"
>Card Nav Item 2 (link)</dsa-card-nav-item
>
<dsa-card-nav-accordion summary="Accordion summary">
<dsa-card-nav-item>Card Nav Item 3 (button)</dsa-card-nav-item>
<dsa-card-nav-item>Card Nav Item 4 (button)</dsa-card-nav-item>
</dsa-card-nav-accordion>
</dsa-card-nav>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/card-nav/card-nav.js';
import '@ds-autonomie/web-components/dist/components/card-nav-accordion/card-nav-accordion.js';
import '@ds-autonomie/web-components/dist/components/card-nav-item/card-nav-item.js';
import '@ds-autonomie/web-components/dist/components/icon/icon.js';
import type { DSACardNav, DSACardNavAccordion, DSACardNavItem, DSAIcon } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant
API
dsa-card-nav
Slots
|
Nom |
Description |
|---|---|
|
media |
Une image optionnelle au début de la carte |
|
title-icon |
Utilisé pour ajouter un icône à gauche du titre |
|
title |
Utilisé pour définir le titre de la carte |
|
subtitle |
Utilisé pour ajouter un sous-titre |
|
(défaut) |
Les éléments de la liste de navigation, des éléments dsa-card-nav-item ou dsa-card-nav-accordion |
dsa-card-nav-accordion
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 |
|
open |
Indique si l'accordéon est ouvert ou non. Vous pouvez activer/désactiver cet attribut pour afficher et masquer l'accordéon, ou vous pouvez utiliser les méthodes show() et hide() et cet attribut reflétera l'état ouvert de l'accordéon |
boolean |
false |
|
summary |
Le résumé à afficher dans l’en-tête. Si vous avez besoin d'afficher du HTML, utilisez plutôt le slot summary |
string |
'' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
hide() |
Cache le contenu de l’accordéon |
() => Promise<void> |
|
show() |
Affiche le contenu de l’accordéon |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal (des éléments dsa-card-nav-item) |
|
summary |
Le résumé de l'accordéon. Alternativement, vous pouvez utiliser la propriété summary |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis lorsque lorsque l'accordéon est fermé et que toutes les animations sont complétées |
|
dsa-after-show |
Émis lorsque l'accordéon est ouvert et que toutes les animations sont complétées |
|
dsa-hide |
Émis lorsque l'accordéon est fermé |
|
dsa-show |
Émis lorsque l'accordéon est ouvert |
dsa-card-nav-item
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
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'item sera un 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 |
- |