Skip to content

Instantly share code, notes, and snippets.

@mdgriffith
Last active April 23, 2019 11:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mdgriffith/b99b7ee04eaabaac042572e328a85345 to your computer and use it in GitHub Desktop.
Save mdgriffith/b99b7ee04eaabaac042572e328a85345 to your computer and use it in GitHub Desktop.
How to manually construct a select menu in Style Elements.
module SelectMenu exposing (..)
import Element exposing (..)
import Element.Input as Input
import Element.Font as Font
import Dom
import Color exposing (..)
main =
Html.program
{ init = ( init, Cmd.none )
, view = view
, update = update
, subscriptions = \_ -> Sub.none
}
init =
{ menuFocused = False
, lunch = Gyro
}
type Msg
= Focus String
| LoseFocus String
| UpdateFocus Bool
| UpdateLunch Lunch
| NoOp
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
UpdateFocus focused ->
( { model | menuFocused = focused }, Cmd.none )
Focus id ->
( { model | menuFocused = True }
, Task.attempt (always NoOp) (Dom.focus id)
)
LoseFocus id ->
( { model | menuFocused = False }
, Task.attempt (always NoOp) (Dom.blur id)
)
UpdateLunch lunch ->
( { model | lunch = lunch }
, Cmd.none
)
type Lunch
= Burrito
| Taco
| Gyro
view model =
el
[ Events.onClick
(if not model.menuFocused then
Focus "my-select-menu"
else
LoseFocus "my-select-menu"
)
, below <|
Input.radio
[ width fill
, htmlAttribute (Html.Attributes.id "my-select-menu")
, Events.onFocus (UpdateFocus True })
, Events.onLoseFocus (UpdateFocus False })
, Background.color white
, Border.color grey
, Border.width 1
, padding 15
, spacing 15
, pointer
, transparent True
, focused
[ transparent False
]
]
{ selected = Just model.lunch
, onChange = Just UpdateLunch
, label =
Input.labelAbove
[ transparent True
]
(text "What would you like for lunch?")
, options =
[ Input.option Gyro (text "Gyro")
, Input.option Burrito (text "Burrito")
, Input.option Taco (text "Taco")
]
}
]
<|
el
[ alignLeft
, Font.bold
, pointer
]
<|
case model.lunch of
Gyro ->
text "What would you like for lunch? - Gyro"
Burrito ->
text "What would you like for lunch? - Burrito"
Taco ->
text "What would you like for lunch? -Taco"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment