elm-criteria

This Elm package lets you create a dropdown/filters UI:

Use elm-criteria

• import Criteria and initialise the Criteria.State in your model

import Criteria

type alias Model =
    { criteria : Criteria.State }


init : Model
init =
    { criteria = Criteria.init }

• Define the configuration that will be passed to the view

criteriaConfig : Criteria.Config Msg Filter
criteriaConfig =
    Criteria.config
        { title = "My filters"
        , toMsg = UpdateCriteria
        , toId = getFilterId
        , toString = getFilterName
        , getSubFilters = getSubFilters
        }

title: The text displayed in the open/close button toMsg: The message in your application responsible for updating the new Criteria.State in your Model toId: A function which create a unique String representing a filter toString: A function which create the text displayed for a filter getSubFilters: A function which returns the list of sub filters for a specific filter

• Define the Msg which will update the state

type Msg = UpdateCriteria Criteria.State

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateCriteria state ->
            { model | criteria = state }

• Finally display the Criteria.view in your view

view : Model -> Html Msg
view model =
    div []
        [
          Criteria.view criteriaConfig model.criteria filters
        ]

Examples

See a live example and its code

To run the exmple on your machine:

• clone this repository git clone [email protected]:dwyl/elm-criteria.git && cd elm-criteria
• move to the examples directory: cd examples
• run elm reactor
• visit localhost:8000 and select the example Elm file you want to run

Tests

To run the tests make sure to have installed the dependencies of the package with elm install then run elm-test --verbose:

Releases