betagouv/elm-dsfr/4.0.0

Introduction

Un package Elm pour le System 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/.