Flexible dropdown component which serves as a foundation for custom dropdowns, select–inputs, popovers, and more.
Basic example of usage:
init : Model
init =
{ myDropdown = False }
type alias Model =
{ myDropdown : Dropdown.State }
type Msg
= ToggleDropdown Bool
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ToggleDropdown newState ->
( { model | myDropdown = newState }, Cmd.none )
view : Model -> Html Msg
view model =
div []
[ dropdown
model.myDropdown
myDropdownConfig
(toggle button [] [ text "Toggle" ])
(drawer div
[]
[ button [] [ text "Option 1" ]
, button [] [ text "Option 2" ]
, button [] [ text "Option 3" ]
]
)
]
myDropdownConfig : Dropdown.Config Msg
myDropdownConfig =
Dropdown.Config
"myDropdown"
OnClick
(class "visible")
ToggleDropdown
Basics.Bool
Indicates wether the dropdown's drawer is visible or not.
{ identifier : String
, toggleEvent : ToggleEvent
, drawerVisibleAttribute : Html.Attribute msg
, callback : Basics.Bool -> msg
}
Configuration.
identifier
: unique identifier for the dropdown.toggleEvent
: Event on which the dropdown's drawer should appear or disappear.drawerVisibleAttribute
: Html.Attribute msg
that's applied to the dropdown's drawer when visible.callback
: msg which will be called when the state of the dropdown should be changed.Used to set the event on which the dropdown's drawer should appear or disappear.
dropdown : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (State -> Config msg -> Html msg) -> State -> Config msg -> Html msg
Creates a dropdown using the given state, config, toggle, and drawer.
dropdown div
[]
[ toggle button
[ class "myButton" ] [ text "More options" ]
, drawer div
[ class "myDropdownDrawer" ]
[ button [ onClick NewFile ] [ text "New" ]
, button [ onClick OpenFile ] [ text "Open..." ]
, button [ onClick SaveFile ] [ text "Save" ]
]
]
model.myDropdownState
myDropdownConfig
toggle : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> State -> Config msg -> Html msg
Transforms the given HTML-element into a working toggle for your dropdown.
See dropdown
on how to use in combination with drawer
.
Example of use:
toggle button
[ class "myButton" ]
[ text "More options" ]
drawer : (List (Html.Attribute msg) -> List (Html msg) -> Html msg) -> List (Html.Attribute msg) -> List (Html msg) -> State -> Config msg -> Html msg
Transforms the given HTML-element into a working drawer for your dropdown.
See dropdown
on how to use in combination with toggle
.
Example of use:
drawer div
[ class "myDropdownDrawer" ]
[ button [ onClick NewFile ] [ text "New" ]
, button [ onClick OpenFile ] [ text "Open..." ]
, button [ onClick SaveFile ] [ text "Save" ]
]