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

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

Filter chips are a variant of chips which allow multiple selection from a set of options. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it.

Table of Contents

Resources

Basic Usage

import Material.Chip.Filter as FilterChip
import Material.ChipSet.Filter as FilterChipSet

type Msg
    = ChipClicked String

main =
    FilterChipSet.chipSet []
        [ FilterChip.chip
            (FilterChip.config
                |> FilterChip.setSelected True
                |> FilterChip.setOnChange
                    (ChipClicked "Tops")
            )
            "Tops"
        , FilterChip.chip
            (FilterChip.config
                |> FilterChip.setOnChange
                    (ChipClicked "Shoes")
            )
            "Shoes"
        ]

Configuration


type alias Config msg =
Internal.Config msg

Configuration of a filter chip

config : Config msg

Default configuration of a filter chip

Configuration Options

setOnChange : msg -> Config msg -> Config msg

Specify a message when the user clicks on a chip

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

Specify whether a chip displays an icon

setSelected : Basics.Bool -> Config msg -> Config msg

Specify whether a filter chip is selected

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

Specify additional attributes

Filter Chip

chip : Config msg -> String -> Chip msg

Filter chip view function


type alias Chip msg =
Internal.Chip msg

Filter chip type

Filter 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

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

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

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

SVG icon

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