aforemny / material-components-web-elm / 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.

Table of Contents

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)
            |> ChocieChipSet.setOnClick ColorChanged
        )
        [ ChoiceChip.chip ChoiceChip.config Red
        , ChoiceChip.chip ChoiceChip.config Blue
        ]

Configuration


type alias Config msg =
Internal.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 (Html.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 =
Internal.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 =
Internal.Icon

Icon type

icon : String -> Icon

Material Icon

ChoiceChip.chip
    (ChoiceChip.config
        |> ChoiceChip.setIcon (ChoiceChip.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

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

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

SVG icon

ChoiceChp.chip
    (ActonChip.config
        > ChoiceChip.setIcon
            (ChoiceChip.svgIcon
                [ Svg.Attributes.viewBox "…" ]
                [-- …
                ]
            )
    )
    "Fon awesome"