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"
Extended floating action button configuration
config : Config msg
Default extended floating action button configuration
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user clicks the floating action button
setIcon : Maybe Icon -> Config msg -> Config msg
Specify whether a floating action button displays an icon
setTrailingIcon : Basics.Bool -> Config msg -> Config msg
Specify whether a floating action button's icon is a trailing icon
Trailing icons are displyed after the label rather than before.
setExited : Basics.Bool -> Config msg -> Config msg
Specify whether a floating action button transitions off the screen
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
fab : Config msg -> String -> Html msg
Extended floating action button view function
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
icon : String -> Icon
Material Icon
ExtendedFab.fab
(Extended.Fab.config
|> ExtendedFab.setIcon
(Just (ExtendedFab.icon "favorite"))
)
"Material Icon"
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
ExtendedFab.fab
(ExtendedFab.config
|> ExtendedFab.setIcon
(Just
(Fab.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
)
)
"Font Awesome"
svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon
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"