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.

Resources
Basic Usage
Configuration
- Configuration Options
Input Chip

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 =

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 (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 =

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 =

Icon

Icon type

icon : String -> Icon

Material Icon

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

customIcon :

(List (Attribute Never) -> List (Html Never) -> Html Never)

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

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

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

SVG icon

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

aforemny/material-components-web-elm/5.0.0