Snippets du Design System France Travail

Liste des snippets des composants Nunjucks du Design System France Travail.

Taper ds pour lister les snippets, pré-remplis avec les valeurs de la documentation : dsButtonSecondary insère {{ ds.buttonSecondary({ … }) }}, et les composants qui n'ont pas encore de macro insèrent un appel component. Les propositions n'apparaissent que dans le texte de la page, ni dans une balise HTML, ni dans une balise Nunjucks. Tab passe d'un paramètre à l'autre.

Le survol du nom d'une macro dans un appel (picture dans ds.picture(…)) affiche la description de son composant et, dans un projet qui installe le paquet @studio/ds-njk, ses liens de documentation (documentation, Figma, développeur).

Déclencheur	Snippet
`dsInputAutocomplete`	Autocomplete – Défaut
`dsBooking`	Booking – Défaut
`dsCaptcha`	Captcha – Paramétrable
`dsCheckbox`	Checkbox – Défaut
`dsCheckboxMulti`	Checkbox – Groupe
`dsCheckboxMultiInline`	Checkbox – Groupe en ligne
`dsCheckboxMixed`	Checkbox – Indéterminé
`dsDatepicker`	Date picker – Défaut
`dsInput`	Input – Paramétrable
`dsInputDate`	Input – Date
`dsInputTime`	Input – Heure
`dsInputEmail`	Input – Email
`dsInputPassword`	Input – Mot de passe
`dsInputNumeric`	Input – Numérique
`dsInputTel`	Input – Téléphone
`dsRadio`	Radio – Défaut
`dsRadioInline`	Radio – En ligne
`dsSelect`	Select – Défaut
`dsTextarea`	Textarea – Défaut
`dsToggle`	Toggle – Défaut
`dsAccessibilityCenter`	Accessibility center – Défaut
`dsCardData`	Card data – Défaut
`dsCardDataWarning`	Card data – Avertissement
`dsCardDataError`	Card data – Erreur
`dsCardDataInformation`	Card data – Information
`dsCardDataSuccess`	Card data – Succès
`dsCardFormRead`	Card form – Restitution
`dsCardFormEdit`	Card form – Édition
`dsBlockIndispo`	Card intro – Défaut
`dsBlockIndispo`	Card intro – En chargement
`dsCardLink`	Card link – Défaut
`dsCardLinkSmall`	Card link – Petite
`dsCardLinkLarge`	Card link – Grande
`dsCardNewsVertical`	Card news – Vertical
`dsCardNewsHorizontal`	Card news – Horizontal
`dsCardNewsHighlight`	Card news – Highlight
`dsFooter`	Footer France Travail – Candidat
`dsFooter`	Footer France Travail – Pro
`dsFooterMaintenance`	Footer France Travail – En maintenance
`dsFooterCandidatHtml`	Footer France Travail – Candidat (version html)
`dsFooterProHtml`	Footer France Travail – Pro (version html)
`dsHeader`	Header France Travail – Candidat non connecté
`dsHeader`	Header France Travail – Candidat connecté
`dsHeader`	Header France Travail – Pro non connecté
`dsHeader`	Header France Travail – Pro connecté
`dsHeaderMaintenance`	Header France Travail – En maintenance
`dsHeaderCandidatHtml`	Header France Travail – Candidat non connecté (HTML)
`dsHeaderCandidatAuthHtml`	Header France Travail – Candidat connecté (HTML)
`dsHeaderEntrepriseHtml`	Header France Travail – Pro non connecté (HTML)
`dsHeaderEntrepriseAuthHtml`	Header France Travail – Pro connecté (HTML)
`dsHeaderMaintenanceHtml`	Header France Travail – En maintenance (HTML)
`dsAlertBlock`	Alert – Non refermable
`dsAlertWarning`	Alert – Avertissement
`dsAlertError`	Alert – Erreur
`dsAlertInformation`	Alert – Information
`dsAlertSuccess`	Alert – Succès
`dsBadgeNeutral`	Badge – Neutre
`dsBadgeInactive`	Badge – Inactif
`dsBadgeDisabled`	Badge – Désactivé
`dsBadgeNotification`	Badge – Notification
`dsBadgeNotificationSmall`	Badge – Petite notification
`dsBreadcrumb`	Breadcrumb – Défaut
`dsBreadcrumbDark`	Breadcrumb – Version sombre
`dsButton`	Button – Paramétrable
`dsButtonPrimary`	Button – Primaire
`dsButtonSecondary`	Button – Secondaire
`dsButtonTertiaryLight`	Button – Tertiaire
`dsButtonTertiaryDark`	Button – Tertiaire (version sombre)
`dsButtonTransverseLight`	Button – Transverse
`dsButtonTransverseDark`	Button – Transverse (version sombre)
`dsButtonLink`	Button – Bouton lien
`dsButtonIcon`	Button – Icône seule
`dsButtonHelp`	Button – Aide
`dsButtonFilter`	Button – Filtre
`dsButtonAllFilters`	Button – Tous les filtres
`dsButtonSort`	Button – Tri
`dsButtonClose`	Button – Croix de fermeture
`dsButtonGroup`	Button group – Secondaire
`dsButtonGroupTertiaryLight`	Button group – Tertiaire
`dsButtonGroupTertiaryDark`	Button group – Tertiaire (version sombre)
`dsIcon`	Icon – Défaut
`dsIconInformation`	Icon – Information
`dsIconWarning`	Icon – Avertissement
`dsIconError`	Icon – Erreur
`dsIconSuccess`	Icon – Succès
`dsLink`	Link – Défaut
`dsLinkDark`	Link – Version sombre
`dsModal`	Modal – Défaut
`dsModalside`	Modal side – Défaut
`dsModalside`	Modal side – Lecture seule
`dsPagination`	Pagination – Défaut
`dsPaginationDark`	Pagination – Version sombre
`dsPaginationMini`	Pagination – Minimaliste
`dsPicture`	Picture – Défaut
`dsProgressbar`	Progress bar – Paramétrable
`dsSegmentedControl`	Segmented control – Défaut
`dsSegmentedControlIconOnly`	Segmented control – Icône seule
`dsSkeleton`	Skeleton – Texte
`dsSkeletonImg`	Skeleton – Image
`dsSkeletonH1`	Skeleton – Titre principal
`dsSkeletonH2`	Skeleton – Titre secondaire
`dsSkeletonCircle`	Skeleton – Cercle
`dsSkipLink`	Skip link – Défaut
`dsSpinner`	Spinner – Défaut
`dsStatus`	Status – Paramétrable
`dsStatusWarning`	Status – Avertissement
`dsStatusError`	Status – Erreur
`dsStatusInformation`	Status – Information
`dsStatusSuccess`	Status – Succès
`dsStepper`	Stepper – Défaut
`dsStepperEdition`	Stepper – Édition
`dsTableSort`	Table sort – Défaut
`dsTabs`	Tabs – Défaut
`dsTag`	Tag – Défaut
`dsToaster`	Toaster – Défaut

FT Nunjucks DS Snippets

ft-integration

Snippets du Design System France Travail