Skip to content

simonh1000/elm-colorpicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Elm ColorPicker widget

An Elm library to help you implement a colo(u)r picker tool without relying upon the presence - or otherwise - of a built-in browser widget.

screen shot

Example

import ColorPicker

type alias Model =
    { colorPicker : ColorPicker.State
    , colour : Color
    }

init : Model
init =
    { colorPicker = ColorPicker.empty
    , colour = Color.rgb 255 0 0
    }

type Msg
    = ColorPickerMsg ColorPicker.Msg

update : Msg -> Model -> Model
update message model =
    case message of
        ColorPickerMsg msg ->
            let
                ( m, colour ) =
                    ColorPicker.update msg model.colour model.colorPicker
            in
                { model
                    | colorPicker = m
                    , colour = colour |> Maybe.withDefault model.colour
                }

view : Model -> Html Msg
view model =
    ColorPicker.view model.colour model.colorPicker
        |> Html.map ColorPickerMsg

Example

See it in action

cd example
npm install
npm run dev

Open http://localhost:3000

To Do

  • Enable use of different sizes of svg elements

Changelog

  • 2.0.0 : Remove two exposed helpers that were no longer needed, and buggy
  • 1.1.4 : add opacity picker; better styling; add classes to elements of widget; improved modelling under the hood
  • 1.1.3 : 0.19 (with new Color library)
  • 1.0.0 : Initial release

Inspired by