aforemny / material-components-web-elm / Material.IconToggle

Icon toggles allow users to take actions and make choices with a single tap.

Table of Contents

Resources

Basic Usage

import Material.IconToggle as IconToggle

type Msg
    = Clicked

main =
    IconToggle.iconToggle
        (IconToggle.config
            |> IconToggle.setOn True
            |> IconToggle.setOnChange Clicked
        )
        { offIcon = IconToggle.icon "favorite_outlined"
        , onIcon = IconToggle.icon "favorite"
        }

Configuration


type Config msg

Icon toggle configuration

config : Config msg

Default icon toggle configuration

Configuration Options

setOnChange : msg -> Config msg -> Config msg

Specify a message when the user changes the icon toggle

setOn : Basics.Bool -> Config msg -> Config msg

Specify whether an icon toggle is on

setDisabled : Basics.Bool -> Config msg -> Config msg

Specify whether an icon toggle is disabled

Disabled icon buttons cannot be interacted with and have no visual interaction effect.

setLabel : Maybe String -> Config msg -> Config msg

Specify the HTML5 aria-label attribute of an icon toggle

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Icon Toggle

Icon toggles are a variant of icon buttons that change the icon when their state changes.

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setOn True)
    { offIcon = IconToggle.icon "favorite_border"
    , onIcon = IconToggle.icon "favorite"
    }

iconToggle : Config msg -> { onIcon : Icon, offIcon : Icon } -> Html msg

Icon toggle view function

On Icon Toggle

To set an icon toggle to its on state, set its setOn configuration option to True.

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setOn True)
    { offIcon = IconToggle.icon "favorite_border"
    , onIcon = IconToggle.icon "favorite"
    }

Disabled Icon Toggle

To disable an icon toggle, set its setDisabled configuration option to True. Disabled icon buttons cannot be interacted with and have no visual interaction effect.

IconToggle.iconToggle
    (IconToggle.config |> IconToggle.setDisabled True)
    { offIcon = IconToggle.icon "favorite_border"
    , onIcon = IconToggle.icon "favorite"
    }

Labeled Icon Toggle

To set the HTML5 arial-label attribute of an icon toggle, use its setLabel configuration option.

IconToggle.iconToggle
    (IconToggle.config
        |> IconToggle.setLabel (Just "Add to favorites")
    )
    { offIcon = IconToggle.icon "favorite_border"
    , onIcon = IconToggle.icon "favorite"
    }

Icon Toggle with Custom Icon

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


type Icon

Icon type

icon : String -> Icon

Material Icon

IconToggle.iconToggle IconToggle.config
    { offIcon = IconToggle.icon "favorite"
    , onIcon = IconToggle.icon "favorite_border"
    }

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

IconToggle.iconToggle IconToggle.config
    { offIcon =
        IconToggle.customIcon Html.i
            [ class "fab fa-font-awesome-alt" ]
            []
    , onIcon =
        IconToggle.customIcon Html.i
            [ class "fab fa-font-awesome" ]
            []
    }

svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon

SVG icon

IconToggle.iconToggle IconToggle.config
    { offIcon =
        IconToggle.svgIcon [ Svg.Attributes.viewBox "…" ]
            [-- …
            ]
    , onIcon =
        IconToggle.svgIcon [ Svg.Attributes.viewBox "…" ]
            [-- …
            ]
    }

Focus an Icon Toggle

You may programatically focus an icon toggle by assigning an id attribute to it and use Browser.Dom.focus.

IconToggle.iconToggle
    (IconToggle.config
        |> IconToggle.setAttributes
            [ Html.Attributes.id "my-icon-toggle" ]
    )
    { offIcon = IconToggle.icon "favorite_border"
    , onIcon = IconToggle.icon "favorite"
    }