Collection of reusable views for elm-ui.
Go to file
2021-06-04 12:09:34 +02:00
.github updated pull request template 2021-02-05 09:03:34 +01:00
docs Tackled #51. Might be fixed now 2021-03-18 12:41:34 +01:00
example Add a passwordInput widget 2021-06-01 08:36:33 +02:00
explorer Add ToggleRow and WrappedRow #69 2021-06-04 11:11:33 +02:00
src Fixed visual bug with chips #70 2021-06-04 12:09:34 +02:00
tests 3.0.0 - Refactored Style Types 2021-02-05 20:49:17 +01:00
.gitignore Hello World 2020-03-15 19:13:12 +01:00
build.sh Added Tests 2021-01-26 22:12:35 +01:00
docs.json Ready for merge 2021-02-05 20:40:06 +01:00
elm-analyse.json Moved Widget.Style into Widget 2021-01-24 09:41:55 +01:00
elm.json 3.0.2 Reworked HOTFIX 2021-03-18 13:07:41 +01:00
LICENSE Hello World 2020-03-15 19:13:12 +01:00
README.md Hotfix for #52 2021-03-18 12:24:12 +01:00

Elm-Ui-Widgets

This package contains independent widgets (no components) written for Elm-Ui. These widgets have no dependencies to other parts of this package. So you can just use as much as you need.

Feel free to start an issue on the repository if you have any questions.

Example using the Material Design style

Table of Contents

Example

Each widget comes with a Widget Type and a Style Type.

  • The Widget Type is an abstract representation of the widget. They can be used as building Blocks for more complicated Widgets.
  • Style Type has all styling attributes (similar to Element.Attribute).

As example, consider the button widget.

Style Type

button: ButtonStyle msg
    ->
        { text : String
        , icon : Icon
        , onPress : Maybe msg
        }
    -> Element msg

In comparison to Elm-Ui's button, we see that List (Attribute msg) has changed into a Style Type. If we look into the Style type, we see that it mirrors the implementation.

type alias ButtonStyle msg =
    { elementButton : List (Attribute msg)
    , ifDisabled : List (Attribute msg)
    , ifActive : List (Attribute msg)
    , otherwise : List (Attribute msg)
    , content : 
          { elementRow : List (Attribute msg)
          , content :
              { text : { contentText : List (Attribute msg) }
              , icon : IconStyle
              }
          }
      }
    }

So the resulting Elm-Ui code looks like this:

button style { onPress, text, icon } =
   Input.button
       (style.elementButton
           ++ (if onPress == Nothing then
                   style.ifDisabled

               else
                   style.otherwise
               )
       )
       { onPress = onPress
       , label =
           Element.row style.content.elementRow
               [ icon
                   (if onPress == Nothing then
                       style.content.content.icon.ifDisabled

                       else
                       style.content.content.icon.otherwise
                   )
               , Element.text text |> Element.el style.content.content.text.contentText
               ]
       }

Styles

For actually displaying the button we have a few different implementations:

containedButton : Palette -> ButtonStyle msg
containedButton =
    Button.containedButton

outlinedButton : Palette -> ButtonStyle msg
outlinedButton =
    Button.outlinedButton

textButton : Palette -> ButtonStyle msg
textButton =
    Button.textButton

** Widget Type **

We also have a Widget Type for the button:

type alias Button msg =
    { text : String
    , icon : Icon
    , onPress : Maybe msg
    }

We can use it to build more complex widgets, for example a select button:

type alias Select msg =
    { selected : Maybe Int
    , options :
        List
            { text : String
            , icon : Icon
            }
    , onSelect : Int -> Maybe msg
    }

select :
    Select msg
    -> List ( Bool, Button msg )

selectButton :
    ButtonStyle msg
    -> ( Bool, Button msg )
    -> Element msg

Checkout the examples in Widget for more details.

Reusable Views vs. Components

In Elm we like to use reusable views instead of components. At first this packages had a few components, but they where more complicated in comparison. They got slowly turned into reusable views one by one. Most have been reduced even further into view functions: Reusable views without a model. All function in Widget are view functions.

Alternatives

For comparison, here are some alternative packages for creating UIs:

Motivation

After looking at the current packages that implement various reusable views (and components) I noticed two things:

  • There are (nearly) no widgets for Elm-Ui, and that's a problem because while going from Element to Html is easy, the opposite is not always possible (as a lot of styling in Elm-Ui would not be adapted to the Html element.)
  • There is no collection of widgets, all in one place. A lot of components get reimplemented over and over again. It's hard to keep track of what package is currently the best.

This package tries to solve both of these problems.

Changelog

  • Version 3.0.0 - Reworked Style Types making it easier to customize. Added full icon support.
  • Version 2.0.0 - Complete rewrite of the package. Now including a material design implementation.