Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/aforemny/material-components-web-elm.
What we checked: Tag 6.0.0 is still on github.com/aforemny/material-components-web-elm; its commit fa5f16f0eddc is from 2020-10-08 13:01 UTC, before the version was published (2020-10-08 13:03 UTC); every file Elm uses matches a copy in a Lamdera package cache from 2021-02-13, from before the change; elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.
The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.
Details · package.elm-lang.org's zip: https://github.com/aforemny/material-components-web-elm/zipball/6.0.0/
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"
}Specify a message when the user changes the icon toggle
Specify whether an icon toggle is disabled
Disabled icon buttons cannot be interacted with and have no visual interaction effect.
Specify the HTML5 aria-label attribute of an icon toggle
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"
}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
Material Icon
IconToggle.iconToggle IconToggle.config
{ offIcon = IconToggle.icon "favorite"
, onIcon = IconToggle.icon "favorite_border"
}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" ]
[]
}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"
}
Icon toggle configuration