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
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 String -> 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 Chips

chip : Config msg -> String -> Chip msg

Filter chip view function

type alias Chip msg =

Chip msg

Filter chip type

aforemny/material-components-web-elm/4.0.0

Material.Chip.Filter

Table of Contents

Resources

Basic Usage

Configuration

Configuration Options

Filter Chips

Modules

Material