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.
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"
]
Internal.Config msg
Configuration of a filter chip
config : Config msg
Default configuration of a filter chip
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
chip : Config msg -> String -> Chip msg
Filter chip view function
Internal.Chip msg
Filter chip type
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
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"