Widget

This package is a collection of configurable UI widgets foru use with mdgriffith/elm-ui: buttons, text fields, bars, etc. Based on Brian Hick's Robot Buttons from Mars. Below are examples of how to use each element. See also the examples folder.

Button

appButton =
    Widget.Button.make ReverseText "Reverse"
        |> Button.withWidth (Bounded 100)
        |> Button.withSelected False
        |> Button.toElement

Bar

Display a bar maxValue pixels wide where the indicator takes up the fraction value / maxValue of the total width.

myBar maxValue value =
    Widget.Bar.make (value / maxValue)
        |> Widget.Bar.withRGBHex "#A00"
        |> Widget.Bar.toElement

Text field

dashboardInput msg text label =
    Widget.TextField.make msg text label
        |> TextField.withHeight 30
        |> TextField.withWidth 50
        |> TextField.withLabelWidth 70
        |> TextField.toElement

rateInput model = 
    dashboardInput AcceptTickRate model.tickRateString "Rate"

Text area

textInput model =
    Widget.TextArea.make GotText model.data "Enter text"
        |> TextArea.withWidth 400
        |> TextArea.withHeight 533
        |> TextArea.toElement