WARNING: This design system is only meant to be used for official French's public service websites and apps.
Its main purpose is to make it easy to identify governmental websites for citizens. See terms.

ATTENTION: Ce design système a uniquement vocation à être utilisé pour des sites officiels de l'état.
Son but est de rendre la parole de l'état clairement identifiable. Consulter les CGU.

Introduction

Un package Elm pour le Système de design du gouvernement français (DSFR). Ce projet est en cours développement. Contribuez et faites-nous part de vos retours via les GitHub Issues.

Installation

En premier lieu, chargez les feuilles de styles du DSFR. Veuillez utiliser la version 1.8 ou supérieure.

Puis installez les packages Elm suivants :

elm install tesk9/accessible-html
elm install betagouv/elm-dsfr

Exemples

Afficher un champ date :

import Accessibility exposing (Html, text)
import BetaGouv.DSFR.Input as Input

view : String -> Html Msg
view date =
    Input.new
        { value = date
        , onInput = UpdateDate
        , label = text "Date"
        , name = "nom"
        }
        |> Input.date
        |> Input.view

Afficher un textarea avec une classe personnalisée :

import Accessibility exposing (Html, text)
import BetaGouv.DSFR.Input as Input
import Html.Attributes exposing (class)

view : String -> Html Msg
view value =
    Input.new
        { value = value
        , onInput = UpdateComment
        , label = text "Commentaire"
        , name = "commentaire"
        }
        |> Input.textArea (Just 8)
        |> Input.withExtraAttrs [ class "w-full" ]
        |> Input.view

Documentation

Retrouvez la documentation complète sur package.elm-lang.org/packages/betagouv/elm-dsfr/latest/.