Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
Input chips are a variant of chips which enable user input by converting text into chips.
import Material.Chip.Input as InputChip
import Material.ChipSet.Input as InputChipSet
type Msg
= ChipSelected String
main =
InputChipSet.chipSet []
[ InputChip.chip InputChip.config "Chip One"
, InputChip.chip InputChip.config "Chip Two"
]
Internal.Config msg
Configuration of an input chip
config : Config msg
Default configuration of an input chip
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user clicks on a chip
setOnDelete : msg -> Config msg -> Config msg
Specify a message when the user clicks on a chip's trailing icon
setLeadingIcon : Maybe Icon -> Config msg -> Config msg
Specify whether an input chip displays a leading icon
setTrailingIcon : Maybe Icon -> Config msg -> Config msg
Specify whether an input chip displays a trailing icon
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additonal attributes
chip : Config msg -> String -> Chip msg
Input chip view function
Internal.Chip msg
Input 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"