Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.
An alternative to action chips are buttons, which should appear persistently and consistently.
import Material.Chip.Action as ActionChip
import Material.ChipSet.Action as ActionChipSet
type Msg
= ChipClicked String
main =
ActionChipSet.chipSet []
(ActionChip.chip
(ActionChip.config
|> ActionChip.setOnClick
(ChipClicked "Chip One")
)
"Chip One"
)
[ ActionChip.chip ActionChip.config "Chip Two"
]Default configuration of an action chip
Specify a message when the user clicks on a chip
Specify whether the chip displays an icon
Specify additional attributes
Action chip view function
Action chip type
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
Icon type
Material Icon
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon
(Just (ActionChip.icon "favorite"))
)
"Add to favorites"Custom icon
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon
(Just
(ActionChip.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)
"Font awesome"SVG icon
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon
(Just
(ActionChip.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
)
)
"Font awesome"
Configuration of an action chip