A floating action button represents the primary action in an application.
A floating action button only contains an icon to indicate its action. For a floating action button that may contain text, refer to the extended 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 as Fab
type Msg
= FabClicked
main =
Fab.fab
(Fab.config
|> Fab.setOnClick FabClicked
|> Fab.setAttributes
[ style "position" "fixed"
, style "bottom" "2rem"
, style "right" "2rem"
]
)
(Fab.icon "favorite")
Floating action button configuration
config : Config msg
Default floating action button configuration
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user clicks the floating action button
setMini : Basics.Bool -> Config msg -> Config msg
Specify whether the floating actions button should be smaller than normally
setExited : Basics.Bool -> Config msg -> Config msg
Specify whether a floating action button should transition off the screen
setTouch : Basics.Bool -> Config msg -> Config msg
Specify whether touch support is enabled (enabled by default)
Touch support is an accessibility guideline that states that touch targets should be at least 48 x 48 pixels in size. Use this configuration option to disable increased touch target size.
Note: FABs with touch support will be wrapped in a HTML div element to prevent potentially overlapping touch targets on adjacent elements.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
fab : Config msg -> Icon -> Html msg
Floating action button view function
If you want the floating action button to appear in smaller size, set its
setMini
configuration option to True
.
Fab.fab (Fab.config |> Fab.setMini True)
(Fab.icon "favorite")
If you want the floating action button to transition off the screen, set its
setExited
configuration option to True
.
Fab.fab (Fab.config |> Fab.setExited True)
(Fab.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
Fab.fab Fab.config (Fab.icon "favorite")
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
Fab.fab Fab.config
(Fab.customIcon Html.i
[ class "fab fa-font-awesome" ]
[]
)
svgIcon : List (Svg.Attribute Basics.Never) -> List (Svg Basics.Never) -> Icon
SVG icon
Fab.fab Fab.config
(Fab.svgIcon
[ Svg.Attributes.viewBox "…" ]
[-- …
]
)
You may programatically focus a floating action button by assigning an id
attribute to it and use Browser.Dom.focus
.
Fab.fab
(Fab.config
|> Fab.setAttributes
[ Html.Attributes.id "my-fab" ]
)
(Fab.icon "favorite_border")
Touch support is enabled by default. To disable touch support set a FAB's
setTouch
configuration option to False
.
Fab.fab
(Fab.config
|> Fab.setTouch False
)
(Fab.icon "favorite_border")