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/
A floating action button represents the primary action in an application.
An extended floating action button primarily contains text to indicate its action, and optionally contains an icon. If you are looking for a floating action button that primarily contains an icon, and no text, refer to the regular floating action button.
Developers are required to manually position the floating action button within their page layout, for instance by setting a fixed position via CSS.
import Html.Attributes exposing (style)
import Material.Fab.Extended as ExtendedFab
type Msg
= Clicked
main =
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setOnClick FabClicked
|> ExtendedFab.setAttributes
[ style "position" "fixed"
, style "bottom" "2rem"
, style "right" "2rem"
]
)
"Favorites"Specify a message when the user clicks the floating action button
Specify whether a floating action button displays an icon
Specify whether a floating action button's icon is a trailing icon
Trailing icons are displyed after the label rather than before.
Specify whether a floating action button transitions off the screen
Specify additional attributes
To add an icon to an extended floating action button, use its setIcon
configuration option and specify the name of a Material
Icon. If you want the icon to be positioned after
the button's label, also set its setTrailingIcon configuration option to
True.
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setIcon (Just (ExtendedFab.icon "favorite"))
)
"Favorites"ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setIcon (Just (ExtendedFab.icon "favorite"))
|> ExtendedFab.setTrailingIcon True
)
"Favorites"If you want the extended floating action button to transition off the screen,
set its setExited configuration option to True.
ExtendedFab.fab
(ExtendedFab.config |> ExtendedFab.setExited True)
"Favorites"This library natively supports Material Icons. However, you may also include SVG or custom icons such as FontAwesome.
Icon type
Material Icon
ExtendedFab.fab
(Extended.Fab.config
|> ExtendedFab.setIcon
(Just (ExtendedFab.icon "favorite"))
)
"Material Icon"Custom icon
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setIcon
(Just
(Fab.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)
"Font Awesome"SVG icon
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setIcon
(Just
(ExtendedFab.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
)
)
"SVG"You may programatically focus an extended floating action button by assigning
an id attribute to it and use Browser.Dom.focus.
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setAttributes
[ Html.Attributes.id "my-fab" ]
)
"favorite_border"
Extended floating action button configuration