betagouv/elm-dsfr/1.0.0

NOTE: the latest version is 5.2.0

BetaGouv.DSFR.Button

Bouton

new : MandatoryButtonConfig msg -> ButtonConfig msg

Crée un bouton

Button.new { onClick = Just Action, label = "action" }
view : ButtonConfig msg -> Html msg

Affiche un bouton

Button.new { onClick = Nothing, label = "Ajouter" }
    |> Button.linkButton "/add"
    |> Button.tertiaryNoOutline
    |> Button.withAttrs [ class "w-full" ]
    |> Button.leftIcon Icons.System.addLine
    |> Button.view

Groupe de boutons

group : List (ButtonConfig msg) -> GroupConfig msg

Crée un groupe de boutons

Par défaut les boutons sont de tailles moyennes et placés à la verticale.

[ Button.new ...]
    |> Button.group
    |> Button.inline
    |> Button.alignedRightInverted
    |> Button.viewGroup
viewGroup : GroupConfig msg -> Html msg

Affiche un groupe de boutons

Configuration des boutons

Tailles de bouton

small : ButtonConfig msg -> ButtonConfig msg
medium : ButtonConfig msg -> ButtonConfig msg
large : ButtonConfig msg -> ButtonConfig msg

Types de bouton

disable : ButtonConfig msg -> ButtonConfig msg
linkButton : String -> ButtonConfig msg -> ButtonConfig msg
linkButtonExternal : String -> ButtonConfig msg -> ButtonConfig msg
regular : ButtonConfig msg -> ButtonConfig msg
reset : ButtonConfig msg -> ButtonConfig msg
submit : ButtonConfig msg -> ButtonConfig msg

Placement de l'icône

leftIcon : IconName -> ButtonConfig msg -> ButtonConfig msg
rightIcon : IconName -> ButtonConfig msg -> ButtonConfig msg
noIcon : ButtonConfig msg -> ButtonConfig msg
onlyIcon : IconName -> ButtonConfig msg -> ButtonConfig msg

Importance

close : ButtonConfig msg -> ButtonConfig msg
primary : ButtonConfig msg -> ButtonConfig msg
secondary : ButtonConfig msg -> ButtonConfig msg
tertiary : ButtonConfig msg -> ButtonConfig msg
tertiaryNoOutline : ButtonConfig msg -> ButtonConfig msg

Configuration des groupes de boutons

Taille des boutons du groupe

groupSmall : GroupConfig msg -> GroupConfig msg

Groupe de petits boutons

groupLarge : GroupConfig msg -> GroupConfig msg

Groupe de grands boutons

Placement des icônes des boutons du groupe

iconsLeft : GroupConfig msg -> GroupConfig msg
iconsRight : GroupConfig msg -> GroupConfig msg

Points de rupture

breakpointSM : Breakpoint
breakpointMD : Breakpoint
breakpointLG : Breakpoint

Placement des boutons dans le groupe

alignedCenter : GroupConfig msg -> GroupConfig msg
alignedRight : GroupConfig msg -> GroupConfig msg
alignedRightInverted : GroupConfig msg -> GroupConfig msg

Disposition des boutons dans le groupe

inline : GroupConfig msg -> GroupConfig msg

Applique le mode horizontal

inlineFrom : Breakpoint -> GroupConfig msg -> GroupConfig msg

Applique le mode horizontal à partir d'un certain point de rupture

Ajout de boutons au groupe

addAfter : ButtonConfig msg -> GroupConfig msg -> GroupConfig msg

Ajoute un bouton à la fin du groupe

addBefore : ButtonConfig msg -> GroupConfig msg -> GroupConfig msg

Ajoute un bouton au début du groupe

Personnalisation

withAttrs : List (Attribute msg) -> ButtonConfig msg -> ButtonConfig msg
withDisabled : Bool -> ButtonConfig msg -> ButtonConfig msg
withOptions : OptionalButtonConfig msg -> ButtonConfig msg -> ButtonConfig msg

Liste déroulante