A popup
See https://developer.mozilla.org/en-US/docs/Web/CSS/position for a description of the relevant CSS.
{ divAttributes : List (Html.Attribute msg)
, positionAttributes : List (Html.Attribute msg)
, choiceAttributes : List (Html.Attribute msg)
, header : Maybe (Html msg)
, renderInputDiv : Maybe (String -> Html msg)
, renderChoice : choice -> Html msg
, footer : Maybe (Html msg)
, wrapper : choice -> msg
}
State passed to view
.
divAttributes
are added to the popup attributes for the whole div
.
positionAttributes
are additional attributes for the whole div
,
usually generated by position
, top
, left
, bottom
, orright
.
choiceAttributes
are applied to the div
holding each choice
.
header
is put before the input div
and the choice
divs.
renderInputDiv
renders your input
, if you pass one to view
.
renderChoice
renders each choice inside its div
.
footer
is put after the choice
divs.
wrapper
maps a selected choice to a msg
for your update
function.
makePopupPicker : (choice -> Html msg) -> (choice -> msg) -> PopupPicker choice msg
Make a bare-bones PopupPicker
.
Args are renderChoice
and wrapper
properties.
view : Maybe String -> List choice -> PopupPicker choice msg -> Html msg
Render the popup.
If the first arg is not Nothing, will call renderInputDiv
to display it.
Sometimes you want to do this on mobile, when the type-in area may be covered
by the picker.
The generated Html is of the form:
div [ style "position" "absolute"
, divAttributes
, positionAttributes
]
[ header
, renderInputDiv input
, div [ onClick <| wrapper choice)>
, choiceAttributes
]
[ renderChoice choice ]
, ...
, footer
]
positionAttributes
position : ( String, String ) -> List (Html.Attribute msg)
position (x, y)
is the same as [ left x, top y ]
.
top : String -> Html.Attribute msg
top x
-> style "top" x
left : String -> Html.Attribute msg
left x
-> style "left" x
bottom : String -> Html.Attribute msg
bottom x
-> style "bottom x
right : String -> Html.Attribute msg
right x
-> style "right" x
zIndex : Basics.Int -> Html.Attribute msg
Pass a larger integer than any other z-index to make the popup go on top.
This usually goes in the divAttributes
property of your PopupPicker
.
zIndex index
-> style "z-index" <| String.fromInt index
.