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.

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

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 =

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 : Bool -> Config msg -> Config msg

Specify whether a filter chip is selected

setAttributes : List (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 =

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 =

Icon

Icon type

icon : String -> Icon

Material Icon

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

customIcon :

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

-> List (Attribute Never)

-> List (Html Never)

-> Icon

Custom icon

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

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

SVG icon

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

aforemny/material-components-web-elm/5.0.0