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 Chips

Resources

Basic Usage

import Material.Chip.Filter as FilterChip


type Msg
    = ChipClicked String


main =
    FilterChip.set []
        [ FilterChip.chip
            (FilterChip.config
                |> FilterChip.setSelected True
                |> FilterChip.setOnClick
                    (ChipClicked "Tops")
            )
            "Tops"
        , FilterChip.chip
            (FilterChip.config
                |> FilterChip.setOnClick
                    (ChipClicked "Shoes")
            )
            "Shoes"
        ]

Configuration

type Config msg

Configuration of a filter chip

config : Config msg

Default configuration of a filter chip

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks on a chip

setIcon : Maybe String -> Config msg -> Config msg

Specify whether a chip displays an icon

setSelected : Bool -> Config msg -> Config msg

Specify whether a chip is selected

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

Specify additional attributes

Filter Chips

set : List (Attribute msg) -> List (Chip msg) -> Html msg

Filter chip container

chip : Config msg -> String -> Chip msg

Filter chip view function

type Chip msg

Filter chip type

aforemny/material-components-web-elm/3.0.3

Material.Chip.Filter

Table of Contents

Resources

Basic Usage

Configuration

Configuration Options

Filter Chips

Modules

Material