Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
Choice chips are a variant of chips which allow single selection from a set of options.
import Material.Chip.Choice as ChoiceChip
import Material.ChipSet.Choice as ChoiceChipSet
type Color
= Red
| Blue
type Msg
= ColorChanged Color
main =
ChoiceChipSet.chipSet
(ChoiceChipSet.config
{ toLabel =
\color ->
case color of
Red ->
"Red"
Blue ->
"Blue"
}
|> ChoiceChipSet.setSelected (Just Red)
|> ChocieChipSet.setOnClick ColorChanged
)
[ ChoiceChip.chip ChoiceChip.config Red
, ChoiceChip.chip ChoiceChip.config Blue
]
Internal.Config msg
Configuration of a choice chip
config : Config msg
Default configuration of a choice chip
setIcon : Maybe Icon -> Config msg -> Config msg
Specify whether the chip displays an icon
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
chip : Config msg -> a -> Chip a msg
Choice chip view function
Internal.Chip a msg
Choice 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
ChoiceChip.chip
(ChoiceChip.config
|> ChoiceChip.setIcon (ChoiceChip.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
ChoiceChip.chip
(ChoiceChip.config
|> ChoiceChip.setIcon
(ChoiceChip.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
"Font awesome"
svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon
SVG icon
ChoiceChp.chip
(ActonChip.config
> ChoiceChip.setIcon
(ChoiceChip.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
)
"Fon awesome"