Combox

This is a custom dropdown based on elm-selectize.

type alias Model =
    { language : Combox.Model }


init : ( Model, Cmd Msg )
init =
    ( { language = Accordion.empty }, Cmd.none )


type Msg
    = ComboxMsg String Combox.Msg


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ComboxMsg selectizeMsg ->
            let
                ( language, cmd ) =
                    Combox.update msg model.combox
            in
            ( { model | language = language }, Cmd.map ComboxMsg cmd )


view : Model -> Html Msg
view model =
    Html.div []
        [ Html.h3 [] [ Html.text "Dropdown Menus" ]
        , Combox.config ComboxMsg
            |> Combox.clear False
            |> Combox.view model.language
        ]

type alias Model =

{ name : String

, selection : Maybe String

, menu : State String

}

Define the dropdown identifier and basic elm-selectize model

type Msg

The custom dropdown menu produces these messages.

config : (Msg -> msg) -> Config msg

Create an initial configuration by calling the config function

The title function defines the title that goes in the header
The placeholder function defines the placeholder of selector
The clear function defines if the delete selection icon appears
The options function defines the attributes html option list
The disabled function defines if the selector is disabled or not

view : Model -> Config msg -> Html msg

Create the view configuration, for example

view : Model -> Html Msg
view model =
    Html.div []
        [ Html.h3 [] [ Html.text "Dropdown Menus" ]
        , Combox.config ComboxMsg
            |> Combox.view model.language
        ]

update : Msg -> Model -> ( Model, Cmd Msg )

Update the status of the drop-down menu.

initial : String -> List String -> Model

Initialize model with data

empty : Model

Initialize empty model

title : String -> Config msg -> Config msg

change the current settings of the title

placeholder : String -> Config msg -> Config msg

change the current settings of the placeholder

clear : Bool -> Config msg -> Config msg

change the current settings of clear

options : List (Attribute Msg) -> Config msg -> Config msg

Change the current settings of the options

disabled : Bool -> Config msg -> Config msg

change the current settings of disabled

getSelection : Model -> Maybe String

Get the current selection from the model

setSelection : Maybe String -> Model -> Model

Set the selection in the model

Modules

Combox

AR3ON/elm-combox/3.0.0

Combox

Modules