betagouv/elm-dsfr/1.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.

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/.