aforemny / material-components-web-elm / Material.Chip.Input

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

Input chips are a variant of chips which enable user input by converting text into chips.

Table of Contents

Resources

Basic Usage

import Material.Chip.Input as InputChip
import Material.ChipSet.Input as InputChipSet

type Msg
    = ChipSelected String

main =
    InputChipSet.chipSet []
        [ InputChip.chip InputChip.config "Chip One"
        , InputChip.chip InputChip.config "Chip Two"
        ]

Configuration


type alias Config msg =
Internal.Config msg

Configuration of an input chip

config : Config msg

Default configuration of an input chip

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks on a chip

setOnDelete : msg -> Config msg -> Config msg

Specify a message when the user clicks on a chip's trailing icon

setLeadingIcon : Maybe Icon -> Config msg -> Config msg

Specify whether an input chip displays a leading icon

setTrailingIcon : Maybe Icon -> Config msg -> Config msg

Specify whether an input chip displays a trailing icon

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

Specify additonal attributes

Input Chip

chip : Config msg -> String -> Chip msg

Input chip view function


type alias Chip msg =
Internal.Chip msg

Input chip type

Input Chip with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.


type alias Icon =
Internal.Icon

Icon type

icon : String -> Icon

Material Icon

ActionChip.chip
    (ActionChip.config
        |> ActionChip.setIcon (ActionChip.icon "favorite")
    )
    "Add to favorites"

customIcon : (List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Html Basics.Never) -> List (Html.Attribute Basics.Never) -> List (Html Basics.Never) -> Icon

Custom icon

ActionChip.chip
    (ActionChip.config
        |> ActionChip.setIcon
            (ActionChip.customIcon Html.i
                [ class "fab fa-font-awesome" ]
                []
            )
    )
    "Font awesome"

svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon

SVG icon

ActionChip.chip
    (ActionChip.config
        |> ActionChip.setIcon
            (ActionChip.svgIcon
                [ Svg.Attributes.viewBox "…" ]
                [-- …
                ]
            )
    )
    "Font awesome"