Widget
This package is a collection of configurable UI widgets
for use with mdgriffith/elm-ui: buttons,
text fields, bars, etc. The API is 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.withTitle "Press to reverse text"
|> Button.toElement
The point is that you can use as many or as few "withXXX" functions as you please.
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