Skip to content

Instantly share code, notes, and snippets.

@yhsiang
Created June 21, 2016 08:44
Show Gist options
  • Save yhsiang/ce6436dc41ee928a39772629b4b78a3b to your computer and use it in GitHub Desktop.
Save yhsiang/ce6436dc41ee928a39772629b4b78a3b to your computer and use it in GitHub Desktop.
Simple Selector in Elm
import Html exposing (node, div, span, text, input)
import Html.Attributes exposing (style, placeholder, value)
import Html.Events exposing (onClick)
import Html.App exposing (beginnerProgram)
{-| Representation of an selectable item. -}
type alias Item =
{ label : String
, value : String
}
{-| Representation of a selector component.
- **options** -
- **selected** -
-}
type alias Model =
{ options: List Item
, selected: String
}
-- {-| Actions.-}
type Msg = Select Item
data : List Item
data =
[ { label = "Taiwan", value = "tw" }
, { label = "Japan", value = "jp" }
, { label = "Korea", value = "kr" }
]
main = beginnerProgram
{ model = { options = data, selected = "" }
, view = view
, update = update
}
update msg model =
case msg of
Select item -> { model | selected = item.value }
{-| View -}
view model =
let
renderItems item =
Html.App.map Select
(div [ onClick item ] [ text item.value ])
menu = List.map renderItems model.options
in
node "ui-selector" []
([ input
[ placeholder "Select ..."
, value model.selected
] [] ] ++ menu)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment