Icon toggles allow users to take actions and make choices with a single tap.
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"
}
Icon toggle configuration
config : Config msg
Default icon toggle configuration
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 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
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"
}
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"
}
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"
}
This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
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 "…" ]
[-- …
]
}
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"
}