Material.Chip.Choice

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

Choice chips are a variant of chips which allow single selection from a set of options.

Resources
Basic Usage
Configuration
- Configuration Options
Choice Chip
Choice Chip with Custom Icon

Resources

Basic Usage

import Material.Chip.Choice as ChoiceChip
import Material.ChipSet.Choice as ChoiceChipSet


type Color
    = Red
    | Blue


type Msg
    = ColorChanged Color


main =
    ChoiceChipSet.chipSet
        (ChoiceChipSet.config
            { toLabel =
                \color ->
                    case color of
                        Red ->
                            "Red"


                        Blue ->
                            "Blue"
            }
            |> ChoiceChipSet.setSelected (Just Red)
            |> ChoiceChipSet.setOnChange ColorChanged
        )
        (ChoiceChip.chip ChoiceChip.config Red)
        [ ChoiceChip.chip ChoiceChip.config Blue
        ]

Configuration

type alias Config msg =

Config msg

Configuration of a choice chip

config : Config msg

Default configuration of a choice chip

Configuration Options

setIcon : Maybe Icon -> Config msg -> Config msg

Specify whether the chip displays an icon

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

Specify additional attributes

Choice Chip

chip : Config msg -> a -> Chip a msg

Choice chip view function

type alias Chip a msg =

Chip a msg

Choice chip type

Choice 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

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

customIcon :

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

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

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

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

SVG icon

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

Dacit/material-components-web-elm/1.0.0