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
= Clicked String
main =
ActionChipSet.chipSet []
[ ActionChip.chip
(ActionChip.config
|> ActionChip.setOnClick Clicked "Chip One"
)
"Chip One"
, ActionChip.chip ActionChip.config "Chip Two"
]
Internal.Config msg
Configuration of an action chip
config : Config msg
Default configuration of an action chip
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user clicks on a 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 -> String -> Chip msg
Action chip view function
Internal.Chip msg
Action 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
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon (ActionChip.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
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon
(ActionChip.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
"Font awesome"
svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon
SVG icon
ActionChip.chip
(ActionChip.config
|> ActionChip.setIcon
(ActionChip.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
)
"Font awesome"