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.

Resources
Basic Usage
Configuration
- Configuration Options
Select Item
Disabled Select Item

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 = "" })
            ""
        )
        [ SelectItem.selectItem
            (SelectItem.config { value = "Apple" })
            "Apple"
        ]

Configuration

type alias Config a msg =

Config a msg

Configuration of a select item

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

Default configuration of a select item

Configuration Options

setDisabled : 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 (Attribute msg) -> Config a msg -> Config a msg

Specify additional attributes

Select Item

type alias SelectItem a msg =

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"

Dacit/material-components-web-elm/1.0.0