aforemny / material-components-web-elm / Material.Chip.Action

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.

Table of Contents

Resources

Basic Usage

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"
        ]

Configuration


type alias Config msg =
Internal.Config msg

Configuration of an action chip

config : Config msg

Default configuration of an action chip

Configuration Options

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

Action Chip

chip : Config msg -> String -> Chip msg

Action chip view function


type alias Chip msg =
Internal.Chip msg

Action chip type

Action Chip with Custom Icon

This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.


type alias Icon =
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"