aforemny / material-components-web-elm / Material.Select.Item

Select provides a single-option select menus.

This module concerns the select items. If you are looking for the select container, refer to Material.Select.

Table of Contents

Resources

Basic Usage

import Material.Select as Select
import Material.Select.Item as SelectItem

type Msg
    = ValueChanged String

main =
    Select.filled
        (Select.config
            |> Select.setLabel (Just "Fruit")
            |> Select.setSelected (Just "")
            |> Select.setOnChange ValueChanged
        )
        (SelectItem.selectItem
            (SelectItem.config { value = "" })
            [ text "" ]
        )
        [ SelectItem.selectItem
            (SelectItem.config { value = "Apple" })
            [ text "Apple" ]
        ]

Configuration


type alias Config a msg =
Internal.Config a msg

Configuration of a select item

config : { value : a } -> Config a msg

Default configuration of a select item

Configuration Options

setDisabled : Basics.Bool -> Config a msg -> Config a msg

Specify whether a select item should be disabled

Disabled select items cannot be interacted with and have not visual interaction effect.

setAttributes : List (Html.Attribute msg) -> Config a msg -> Config a msg

Specify additional attributes

Select Item


type alias SelectItem a msg =
Internal.SelectItem a msg

Select item type

selectItem : Config a msg -> String -> SelectItem a msg

Select item constructor

Disabled Select Item

Select items may be disabled by setting their setDisabled configuration option to True.

SelectItem.selectItem
    (SelectItem.config { value = "Apple" }
        |> SelectItem.setDisabled True
    )
    "Apple"